title: Set data in react
body: <p>I have a series of data that contains some objects in one array(json file) and it will be shown in React. The main problem is calling <code>renderDetails</code>.
  When I call <code>this.renderDetails(element, i)</code> in <code>renderInfo</code> directly, everything works and <code>var text=element.Ruletext</code> will be shown in <code>resultRule</code>. But when <code>renderDetails</code> is called in <code>showDiv = (e,element,i) =&gt;{....</code> function, <code>var text=element.Ruletext</code> will not be shown in <code>resultRule</code>.</p>
  
  <pre><code>class App extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              data: [],
              DetailsInfo: {},
              divVisibles: {},
              resultRule: {}
          };
      }
  
      render() {
          const { data } = this.state;
          const renderInfo = data.map((item, i) =&gt; {
              return (
                  &lt;div class="item"&gt;
                      &lt;div class="moreInfo" onClick={e =&gt; this.showDiv(e, item, i)}&gt;
                          &lt;span&gt;show more data&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div
                          id="box-info"
                          key={i}
                          className={` ${!this.state.divVisibles[i] ? "unvisible" : "visible"}`}
                      &gt;
                          &lt;div class="table"&gt;{this.state.DetailsInfo[i]}&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              );
          });
          return &lt;div&gt;{renderInfo}&lt;/div&gt;;
      }
      DetailsInfo = i =&gt; {
          this.setState(prevState =&gt; ({
              divVisibles: { ...prevState.divVisibles, [i]: !prevState.divVisibles[i] }
          }));
      };
      showDiv = (e, element, i) =&gt; {
          this.setState(prevState =&gt; ({
              DetailsInfo: { ...prevState.DetailsInfo, [i]: this.renderDetails(element, i) },
              divVisibles: { ...prevState.divVisibles, [i]: !prevState.divVisibles[i] }
          }));
      };
      renderDetails(element, i) {
          var indents = [];
          indents.push(
              &lt;div&gt;
                  &lt;span&gt;{this.renderRule(element, i)}&lt;/span&gt;
                  &lt;div key={i} class="resultRule"&gt;
                      {this.state.resultRule[i]}
                  &lt;/div&gt;
              &lt;/div&gt;
          );
  
          return indents;
      }
  
      renderRule(element, i) {
          return (
              &lt;span class="txtRul" onClick={e =&gt; this.handelrule(e, element, i)}&gt;
                  show rule text
              &lt;/span&gt;
          );
      }
      handelrule = (e, element, i) =&gt; {
          var text = element.Ruletext;
          this.setState(prevState =&gt; ({
              resultRule: { ...prevState.resultRule, [i]: text } ///In this part text does not be set in resultRule ////
          }));
      };
  }
  ReactDOM.render(&lt;App /&gt;, document.getElementById("Result"));
  </code></pre>