Почему контент отображается только после onChange?

Question

Я использую rc-slider , чтобы взять набор значений из массива и отобразить их в моем компоненте.

const array = ["Hey", "Ho", "Me", "Too", "See"]
class App extends Component {
  state = { sliderValues: [0, 1, 2, 3, 4] };

  handleChange = sliderValues => {
    this.setState({ sliderValues }, () => console.log(array[this.state.sliderValues]));
  };

  render() {
    const renderContent = array.map((value, index) => {
      console.log(value, 'value')
      console.log(index, 'index')
      if (index === this.state.sliderValues) {
        return (
          <div>
            <h1>{value}</h1>
          </div>
        )
      }
    })
    return (
      <div>
        {renderContent}
        <Slider onChange={this.handleChange} min={0} max={4} defaultValue={this.state.sliderValues} marks={{ 0: 250, 1: 500, 2: 750, 3: 1000, 4: 1500 }} step={null} />
      </div>
    )
  }
}

Я хочу показать только один элемент из массива одновременно. Все работает правильно, кроме первоначального рендера. Вы заметите, что компонент визуализирует себя только после того, как вы взаимодействуете с <Slider />..

Почему это?

Codesandbox

Answer 1

    import React, {Component} from "react";
    import ReactDOM from "react-dom";
    import Slider from 'rc-slider'
    import "./styles.css";

    const array = ["Hey", "Ho", "Me", "Too", "See"]
    class App extends Component {
      // you need to provide an initial value to be rendered at the first time
      state = { sliderValues: 0 };

      handleChange = sliderValues => {
        this.setState({ sliderValues }, () => console.log(array[this.state.sliderValues]));
      };

      render() {
        const renderContent = array.map((value, index) => {
          console.log(value, 'value')
          console.log(index, 'index')
          if (index === this.state.sliderValues) {
            return (
              <div key={value}>
                <h1>{value}</h1>
              </div>
            )
          }
        })
        return (
          <div>
            {renderContent}
            <Slider onChange={this.handleChange} min={0} max={4} defaultValue={this.state.sliderValues} marks={{ 0: 250, 1: 500, 2: 750, 3: 1000, 4: 1500 }} step={null} />
          </div>
        )
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);