Onclick event in For loop in react

Question

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 that the value of index_ in onClick={e => this.handelruleRoom(e, element.families[j], index)} function in for loop always shows the last one. For example lenfamilies is 3 , when ever I click <span key={index} onClick={e => this.handelruleRoom(e, element.families[j], index)}>Click</span> with key=1in console the value of index_ is 3.

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        DetailsInfo: {},
        text:{}
    }
}
render() {
    const { data } = this.state;
    const renderInfo = data.map((item, i) => {
        return (
            <div class="item">
                <div class="moreInfo" onClick={e => this.showDiv(e, item, i)}>
                    <span>show more data</span>
                </div>
                    <div class="table">{this.state.DetailsInfo[i]}</div>
                </div>
        )
    })
    return <div>{renderInfo}</div>;
}
showDiv = (e, element, i) => {
    this.setState(prevState => ({
        DetailsInfo: { ...prevState.DetailsInfo, [i]: this.renderDetails(element, i) },
    }))
}
renderDetails(element,i){
     let lenfamilies = element.families.length 
     var indents =[];
         var index=0;
     for(var j = 0 ;j <lenfamilies;j++){
         var numF = i;
         var numS = j;
         var stingF = numF.toString();
         var stingS = numS.toString();
         index= stingF+stingS
         indents.push(<div>
             <span  key={index} onClick={e => this.handelrule(e, element.families[j], index)}>Click</span>
             <span  class="text" key={index}>{this.state.text[index]}</span></div>
         )
     }
     return(
       indents
       )
     }
handelrule = (e, element, index) => {
console.log(index)
 this.setState( prevState => ({
     text: { ...prevState.text, [index]:   'test'},
     })) 
  }
}
 ReactDOM.render(<App />, document.getElementById("Result"));

Hi @Prakash Sharma.I uselet instead of var for j variable. but there is no different;| — bita
– bita, Commented Feb 24, 2019 at 8:14

Prakash Sharma · Accepted Answer · 2019-02-24 08:24:58Z

1

You are creating a function inside a loop. You can avoid the for loop altogether by using forEach or map method like this

lenfamilies.forEach((fml, j) => {
         var numF = i;
         var numS = j;
         var stingF = numF.toString();
         var stingS = numS.toString();
         index= stingF+stingS
         indents.push(<span  key={index} onClick={e => this.handelrule(e, element.families[j], index)}>Click</span>
         )
     }
);

Or you can use let instead of var for j

for(let j = 0 ;j <lenfamilies;j++){
    ...
    indents.push(<span  key={index} onClick={e => this.handelrule(e, element.families[j], index)}>Click</span>)
}

UPDATE:-

For index, you can take index declaration inside the loop and use let for index too.

for(let j = 0 ;j <lenfamilies;j++){
    let index = 0;
    ....

edited Feb 24, 2019 at 8:24

answered Feb 24, 2019 at 8:12

Prakash Sharma

16.7k6 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bita Over a year ago

Using let instead of var for j did not solve the problem.

bita Over a year ago

Thanks alot @Prakash Sharma. There is another issue. Can I ask you?

Prakash Sharma Over a year ago

@bita If issue is completely different, it would be better to ask another dedicated question.

bita Over a year ago

It is about this question.

bita Over a year ago

Could you please take a look on my code. I want by clicking onClick={e => this.handelrule(e, element.families[j], index)} the text of <span class="text" key={index}>{this.state.text[index]}</span> be test and test is going to be dynamic. I put test just as testing, but does not set.

|

Collectives™ on Stack Overflow

Onclick event in For loop in react

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related