Hide an element in multiple elements by react - reactjs

Question

I want to hide an element by react in multiple elements. I try to use isHidden: true, but when i click the close button instead of hiding selected element, gives me a full blank page ? why?
class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: [
{ _id: "5bb85a2be138230670c3687b", firstName: "foo", lastName: "foo", email: "foo#foo.com"},
{ _id: "5bb9b3cae13823261e886990", firstName: "bar", lastName: "bar", email: "bar#bar.com" },
],
editVisibles: {},
isHidden: true,
};
}
showEditDiv = (_id) => {
this.setState( prevState => ({
editVisibles: { ...prevState.editVisibles, [_id]: !prevState.editVisibles[_id] }
})
)
};
toggleHidden = ()=> this.setState((prevState)=>({isHidden: !prevState.isHidden}))
renderFlight() {
return this.state.data.map(item => {
return (
<div>
{this.state.isHidden &&
<li key={item._id}>
<div class="close" onClick={() => this.toggleHidden(item._id)}>X</div>
<p>{item.email}</p>
<button onClick={() => this.showEditDiv(item._id)}>Edit</button>
<div key={item._id} className={`edit-form ${!this.state.editVisibles[item._id] ? "unvisible" : "visible"}`}>
</div>
</li>
}
</div>
)
})
}
render() {
return (
<div>{this.renderFlight()}</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

First of all, the code is really messy and hard to read, so you should edit it for better visibility.
Also, notice that isHidden is true when the element should not be visible, but your code states that "if this.state.isHidden is true, then render the content of the div".
What you want is !this.state.isHidden && ...
Also, you should use reduce/filter to filter out the elements that have a truthy value for isHidden, instead of map, because right now you're pushing empty div elements which is unnecessary

Answer 2

Could see an argument in your method call - this.toggleHidden(item._id), but item._id is not used in the function definition. Any particular reason for that?
toggleHidden = ()=>
this.setState((prevState)=>({isHidden: !prevState.isHidden
}))
Basically we have to select the item by keyProp and apply the toggle method. Go through
How to find element by Key in React?
<li keyProp={'listItem_'+item._id}>
would give the necessary attribute and we can apply show/hide on the li element by selecting using props.keyProp