How do I get acces to only one item from map method in react js

Question

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>

here is the image

Answer 1

Issue

You are using a single boolean edit state value to trigger the edit mode of all mapped elements.

Solution

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.

1. Use the element index to identify what is in "edit" mode, null means nothing has the "edit" mode.

    const [editIndex, setEditIndex]= useState(null);
   

2. 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>
   

3. 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>}
   

Additional Note

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.