Toggle one element in React.js onClick - reactjs

Question

I have info button that is supposed to open specific description element onclick event - info is obtained from Firebase. However, myOnclick event triggers all of the siblings elements and I need to toggle/untoggle only specific one. What am I missing and doing wrong?
here's the code:
import React, { Component } from "react";
import firebase from "../../firebase";
//Data obtained from DB and rendered on page
export default class Tour extends Component {
constructor() {
super();
this.state = {
tours: [],
showInfo: false,
};
}
// button that toggles info
handleInfo = () => {
this.setState({
showInfo: !this.state.showInfo,
});
};
// component did mount
componentDidMount() {
const dbRef = firebase.database().ref();
dbRef.on("value", (snapshot) => {
// checking changes in db
const data = snapshot.val();
const newToursAarray = [];
for (let inventoryName in data) {
const toursObject = {
id: inventoryName,
tours: data[inventoryName],
name: data[inventoryName].name,
seats: data[inventoryName].seats,
date: data[inventoryName].date,
duration: data[inventoryName].duration,
imgUrl:"https://source.unsplash.com/350x350/?" + data[inventoryName].name,
// temporary tour info placeholder and will be removed and connetcted to real DB
info: "Lorem ipsum dolora saepe fugiat. " +
data[inventoryName].name,
};
newToursAarray.push(toursObject);
}
this.setState({
tours: newToursAarray,
});
});
}
render() {
return (
<div className="tourlist">
{this.state.tours.map((toursObject) => {
return (
<section className="tourItem">
<header>
<h3> {toursObject.name} </h3>
<h5>
info
{/* button that toggles info */}
<span onClick={this.handleInfo}>
<i className="fas fa-caret-square-down"></i>
</span>
</h5>
</header>
<ul className="inventoryItem" key={toursObject.id}>
<li> {toursObject.date} |</li>
<li>{toursObject.duration} hrs |</li>
<li> {toursObject.seats} seats </li>
</ul>
<div className="img-container">
{this.state.showInfo && (
// text that toggles when clicking on info button
<p className="tour-info">{toursObject.info}</p>
)}
<img src={toursObject.imgUrl} alt="image of the tour" />
</div>
</section>
);
})}
</div>
);
}
}

Answer 1

So the issue here is that the expanding options are all referencing the same piece of state. You have your state.showInfo outside of your tours.map. So as you map through your tours, you say "if 'showInfo' then reveal this section" and that 'showInfo' is the same for everything.
What I would recommend is storing the id of the expanded tourObject, and then you can check against that.
Something like this:
handleInfo = (id) => {
this.setState({
infoToShow: id,
});
};
And then in your onClick it would look more like this:
<span onClick={() => this.handleInfo(tourObject.id)}>
<i className="fas fa-caret-square-down"></i>
</span>
And your logic to show or hide can just be this:
{this.state.infoToShow === tourObject.id && (
// text that toggles when clicking on info button
<p className="tour-info">{toursObject.info}</p>
)}
This way you can store the id in a place accessible to all the looped through tours, but they won't conflict with each other.
So instead of checking if showInfo is true, check if the id that you want to show matches the id of the tour.