My question may not be clear but here is my problem. Here is my card that I got from an array using the map method and display each item on each card. And I have triggered the "Edit" button so that it will show the hidden text(Want to see this in only one card). But when I click on only one card, all cards show that hidden message. Can you please help me?
I want to see that "Want to see this in only one card" text in that card where edit button is clicked
Here are my codes:
const [edit, setedit]= useState(false)
<Grid container spacing={5} className="main-grid" >
{allitems.map((oneitem, index) => {
return (
<Grid item key={index} md={3} className="itemGrid" >
<Card className="card">
<CardContent>
<Typography className="" color="textSecondary" gutterBottom>
{oneitem.title}
</Typography>/
<p variant="h5" component="h2" className="description">
{oneitem.description}
</p>
<p className="" color="textSecondary">
Created At: {oneitem.createdAt}
</p>
<Button size="small" onClick={()=> deleted(oneitem._id)} >Delete</Button>
<Button size="small" onClick={()=>setedit(!edit)} >Edit</Button> <-here is the problem
{edit && <h1>Want to see this in only one card</h1>}
</CardContent>
You are using a single boolean edit state value to trigger the edit mode of all mapped elements.
Use some edit state that you can correlate to your data, like the index or an item id property. Since I don't see any GUIDs used I'll demo with index.
Use the element index to identify what is in "edit" mode, null means nothing has the "edit" mode.
const [editIndex, setEditIndex]= useState(null);
Update the toggle button to toggle a new index or back to null if the same button is clicked
<Button
size="small"
onClick={() => setEditIndex(editIndex => editIndex === index ? null : index)}
>
Edit
</Button>
Match the saved editIndex state to the currently mapped element to conditionally render the messaging.
{editIndex === index && <h1>Want to see this in only one card</h1>}
I see you have a delete button:
<Button size="small" onClick={()=> deleted(oneitem._id)} >Delete</Button>
If you are deleting elements from the underlying data then you will want to not use the array index as the React key. Instead you should use a uniquely identifying property, like _id, of each element (they need only be unique among siblings). So instead of using the index to set the "edit" mode you would use _id instead.
This problem comes up for you because you're using a common edit value throughout the map. So, if you change the main value of "edit" to "true" (as in this case), it will consider the edit as true for all the cards.
No, Here's what you can try doing ( I'm considering you can edit only one card at a time ) instead of keeping the edit as a boolean value (true|false) use it as an integer value to store the index of the card in your array.
Steps :
setEdit(editVal) => {
if(this.state.edit === editVal){
this.setState({
edit: null
})
}
else{
this.setState({
edit: editVal
}
}
}onClick={()=> setEdit(index)}
Now everytime you click the edit button the edit value either changes to a new index value or to a null.
One last change is to replace this:
{edit && <h1>Want to see this in only one card</h1>}
with this
{edit===index && <h1>Want to see this in only one card</h1>}
Concluding:
We first moved the edit value to Integer or null, Then on clicking edit the index value of the element in the array is assigned to "edit". once this happens, we're checking if the edit value is equals to the index value (step 5), if so, it shows the message only for that card. Once you click edit again, the value of "edit" becomes null (if clicked for the same card).