[React App] Div zależny od select

Witam,
muszę zrobić pojawiającego się w komponencie diva tyle razy ile zostanie wybrane w select,
Np./ select: 2x pojawiają się dwa divy

próbuję to zrobić przez dodanie do tablicy ale coś mi nie idzie.

  state = {
    value: 1,
   renderData: []
  };


componentDidMount() {  
  this.state.renderData.push(<RenderCube key={this.state.value} />)
}

  handleChangeNumberCube = e => {
    this.createCube();
    this.setState({
      value: e.target.value
    });
  };

  createCube = () => {
    if (this.state.renderData.length > 0) {
      for (let i =0; i < this.state.value; i++) {
      this.state.renderData.push(<RenderCube key={this.state.value} />)}
      console.log(this.state.value)
     }

<div className="cubes">{this.state.renderData}</div>




Pytanie brzmi dlaczego  div mi się nie wyświetla zaraz po odpaleniu funkcji skoro przekazuje do tablicy element mimo wykozystania componentDidMount
i dlaczego div pokazuje się dopiero po drugim wybraniu select

Powód dla którego nie działa jest bardzo prosty. Zwyczajnie nie znasz/rozumiesz cyklu życia komponentu. Metoda componentDidMount odpala się już po metodzie render! Zatem najpierw wyrenderuje się komponent, który zobaczy użytkownik, a dopiero potem odpali się componentDidMount. Zatem modyfikujesz stan zbyt późno, ewentualnie źle zależy kto na to spojrzy :) Jeżeli chcesz zmienić stan dopiero w componentDidMount, ale chcesz równocześnie zaprezentować dane użytkownikowi musisz użyć metody setState aby powiadomić Reacta o zmianie stanu komponentu. Użycie metody setState w componentDidMount spowoduje dodatkowe wywołanie metody render, ale jeszcze przed wyświetleniem komponentu w przeglądarce, zatem użytkownik nie zobaczy stanu pośredniego tylko od razu zobaczy stan zmodyfikowany. Jest to trochę kulawe rozwiązanie, ponieważ powoduje dwukrotne wywołanie metody render, ale spoko nie będziesz pierwszym i ostatnim klepaczem React, który tak robi.

Z kolei jeżeli wolisz drogę JS Ninja tudzież Jedi, który nie jest zwykłym klepaczem, to ustaw stan w konstruktorze :D

Btw. do modyfikowania stanu w React powinieneś zawsze używać setState, chyba, że robisz to w konstruktorze ew. jesteś JS Ninja i wiesz co robisz :) Tylko uważaj! Wywołanie setState nie musi od razu spowodować zmiany stanu, czyli jeżeli wywołasz setState, to możesz nie zobaczyć od razu zmiany w this.state bo React może sobie "odłożyć" zmianę na później ;) Jeżeli chcesz mieć pewność, że dalszy kod wywoła się po zmianie stanu, to skorzystaj z metody componentDidUpdate lub skorzystaj z funkcji zwrotnej (callback) setState setState(updater, callback).

Ok,
Tak masz rację dopiero się uczę i żeby to ogarnąć staram się stworzyć apkę samodzielnie. Bo wtedy wychodzą wszystkie tego typu dziwolągi. z przekazaniem setState jak klepacz ogarnąłem wczoraj samemu, jednak przeklinam dziś to co mi podesłałeś. Serdecznie dziękuje za pomoc. czy w razie potrzeby mogę się jeszcze zgłosić:)

Jasne. Jeżeli będziesz miał problem pisz na forum, to ja lub ktoś inny, kto akurat będzie odpowie.

  state = {
    value: "",
    renderData: [],
    
  };

  componentDidMount() {
    this.state.renderData.push(
      <RenderCube zmienna={this.state.number} key={this.state.value + 1} />
    );

    this.setState({
      value: 1,
    
    });
  }
  dodawanieDoTablicy() {
    this.state.renderData.push(
      <RenderCube zmienna={this.state.number} key={this.state.value + 1} />
    );
  }

  createCube = e => {
    this.setState({
      value: e.target.value
    });

    this.dodawanieDoTablicy();
  };

render() {
    return (
      <div className="box">
        <form>
          <label className="lableBox" htmlFor="numberCube">
            {" "}
            Wybież ilość kostek{" "}
          </label>
          <select
            value={this.state.value}
            onChange={this.createCube}
            id="numberCube"
          >
            <option value="1">1x</option>
            <option value="2">2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
            <option value="5">5x</option>
            <option value="6">6x</option>
          </select>
        </form>
        <div className="cubes">{this.state.renderData}</div>```

Jak mogę zrobić aby ilość dodanych elementów na bieżąco była równa wartości value ??

Pamiętasz co pisałem na temat powiadomienia Reacta o zmianie stanu? Jeżeli modyfikujesz stan bezpośrednio, to React nie wie, że stan został zmodyfikowany.

Pomimo użycia metody setState w componentDidUpdate nadal modyfikujesz stan bezpośrednio czyli robisz push do renderData. Tak jak już pisałem wcześniej, tak się nie robi! Jeżeli chcesz zmodyfikować stan tablicy w React to najpierw ją odczytujesz do zmiennej, a następnie dodajesz (do zmiennej, a nie do stanu) nowy element np. za pomocą push, na koniec zapisujesz zmienną do stanu poleceniem setState. Popraw to w obu miejscach, to apka zacznie działać.

Myślę, że przyczyna moich niepowodzeń jest znacznie prostsza. Nie ogarniam kompletnie OOP co w połączeniu z małym doświadczeniem w JS przekłada się na to że React jest dla mnie taki trudny. W związku z tym mam pytanie jak znaleźć gościa który zechciał by zostać moim nauczycielem? Samodzielnie z książek się uczę i jest ciężko bez pomocy kogoś, o bootkampach słyszałem wiele niepochlebnych opinii..