title: How to callback a function on onClick event in ReactJs
body: <p>I have <code>handleClick</code> event which by clicking <code>renderDetail</code> function must be run in <code>{this.state.ShowInfo[i]}</code> div.I do it like below code:
  I used callback but did not work.</p>
  
  <pre><code>class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      ShowInfo: {},
  
    }
  }
  render() {
    const { data } = this.state
    const renderInfo = data.map((item, i) =&gt; {
      return (
        &lt;div class="item"&gt;
          &lt;div onClick={e =&gt; this.handleClick(e, item, i)}&gt;
            &lt;span&gt;Click&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;{this.state.ShowInfo[i]}&lt;/div&gt;
        &lt;/div&gt;
      )
    })
    return &lt;div&gt;{renderInfo}&lt;/div&gt;
  }
  handleClick = (e, element, i) =&gt; {
    fetch('/json.bc', {///I can see that the json.bc is loaded in network tab by result/////
      method: 'POST',
    })
      .then(response =&gt; response.text())
      .then(text =&gt; {
        let Maindata = JSON.parse(text.replace(/\'/g, '"'))
        this.setState(prevState =&gt; ({
          ShowInfo: {
            ...prevState.ShowInfo, [i]: (Maindata, i) =&gt; {
              console.log(Maindata)// console.log(Maindata) did not show anything.There is no result in this part////
              let element = Maindata
              let lenfamilies = element.families.length
              console.log(lenfamilies)//// console.log(lenfamilies) did not show anything.There is no result in this part////
              let indents = [];
              for (let j = 0; j &lt; lenfamilies; j++) {
                let numF = i
                let numS = j
                let stingF = numF.toString()
                let stingS = numS.toString()
                index = stingF + stingS
                indents.push(
                  &lt;div&gt;
                    &lt;span
                      key={index}&gt;
                    &lt;/span&gt;
                  &lt;/div&gt;
                )
              }
              return (
                indents
              )
            }
          },
        }))
      }).catch(error =&gt; console.error(error))
    }
   }
   ReactDOM.render(&lt;App /&gt;, document.getElementById("Result"))
  </code></pre>
  
  <p><code>&lt;div&gt;{this.state.ShowInfo[i]}&lt;/div&gt;</code> is empty by using callback.Have you any other way to call <code>renderDetail</code> function in <code>handleClick</code> event?</p>
  
  <p><strong>Edit:</strong></p>
  
  <pre><code>class App extends React.Component {
  constructor(props) {
  super(props)
  this.state = {
    data: [],
    ShowInfo: {},
    text: {}
  
   }
  }
  render() {
  const { data } = this.state
  const renderInfo = data.map((item, i) =&gt; {
    return (
      &lt;div class="item"&gt;
        &lt;div onClick={e =&gt; this.handleClick(e, item, i)}&gt;
          &lt;span&gt;Click&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;{this.state.ShowInfo[i]}&lt;/div&gt;
  &lt;/div&gt;
    )
  })
  return &lt;div&gt;{renderInfo}&lt;/div&gt;
  }
  
  handleClick = (e, element, i) =&gt; {
    fetch('/json.bc', {
    method: 'POST',
    },)
  .then(response =&gt; response.text())
  .then(text =&gt; {
   let Maindata = JSON.parse(text.replace(/\'/g, '"'))
   this.setState(prevState =&gt; ({
   ShowInfo: { ...prevState.ShowInfo,[i]: this.renderDetail(Maindata, i)},
  }))
  }).catch(error =&gt; console.error(error))
  }
  
  renderDetail(element, i) {
   let lenfamilies = element.families.length
   let indents = []
  let index = 0
  for (let j = 0; j &lt; lenfamilies; j++) {
    let numF = i
    let numS = j
    let stingF = numF.toString()
    let stingS = numS.toString()
    index = stingF + stingS
    indents.push(
    &lt;div&gt;
      &lt;span
          key={index}
          onClick={e =&gt; this.handleText(e, element.families[j], index)}
        &gt;
          Click
        &lt;/span&gt;
        &lt;span key={index}&gt;
          {this.state.text[index]}
        &lt;/span&gt;
  &lt;/div&gt;
    )
  }
   return(
         indents
         )
    }
    handleText = (e, element, index) =&gt; {
          this.setState(prevState =&gt; ({
          text: { ...prevState.text, [index]: "test" }////In this part   'test' should be set in  span but it is not been set
    }))
   }
   }
  </code></pre>