reactjs map and css class toggle - reactjs

Question

<div>
{this.props.data.map((res, index) => {
return (<div key={index}>
<div>
<span>{response.testData}</span>
<a key={index} onClick={() => this.showExtraLine(index)}><span className={`btn-green ${this.state.showExtraLine ? 'active' : ''}`}></span></a>
{ this.state.showExtraLine ? <span>
{res.abc[0].def}
</span> : '' }
</div>
</div>
);
})}
</div>
showExtraLine(e){
this.setState({
showExtraLine: !this.state. showExtraLine,
});
}
Need to toggle the {res.abc[0].def} part on click of anchor - toggle works, but not sure how to handle toggling only the corresponding span - right now it is hiding all the rows..how to handle css toggle when using .map?

Answer 1

I think the problem is in your state variable, you are using a single state variable and printing the <span> on the basis of state of that variable.
Instead of that use an array in state showExtraLine = [],
in showExtraLine() function you are passing index, use that index to toggle only that element.
Try this it should work:
{this.props.data.map((res, index) => {
return (<div key={index}>
<div>
<span>{response.testData}</span>
<a key={index} onClick={() => this.showExtraLine(index)}><span className={`btn-green ${!this.state.showExtraLine[index] ? 'active' : ''}`}></span></a>
{ !this.state.showExtraLine[index] ?
<span>{res.abc[0].def}</span>
: '' }
</div>
</div>
);
})}
showExtraLine(index){
let showExtraLine = this.state.showExtraLine.slice(0);
showExtraLine[index] = !showExtraLine[index];
this.setState({
showExtraLine: showExtraLine,
});
}

Answer 2

Right now you are maintaining the state for all of the mapped elements in your component, so they all reference the same value. You should instead create a component that will be used to render each of your mapped elements individually with their own state.
class Parent extends React.Component {
render() {
return (
<div>
{this.props.data.map((res, index) => <Child key={index} {...res} />)}
</div>
);
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
showExtraLine: false
};
this.showExtraLine = this.showExtraLine.bind(this);
}
render() {
return (
<div>
<div>
<span>{this.props.testData}</span>
<a key={index} onClick={this.showExtraLine}>
<span className={`btn-green ${this.state.showExtraLine ? 'active' : ''}`}></span>
</a>
{ this.state.showExtraLine ? <span>{this.props.abc[0].def}</span> : '' }
</div>
</div>
);
}
showExtraLine(e){
this.setState({
showExtraLine: !this.state.showExtraLine
});
}
}