hello im building a app in react, I have mapped some data from a api and was wondering how add data from a input on to the specific element? im not sure how to accomplish this i have tried a couple different ways, ive tried added the mapped elements id into the state and checking if the the id matched the elements id but i have not been able to make it work, i can get it to apply the tag to every element but i want it to just add to the specific element where you entered the tag.

const [students, setStudents] = useState([]);
  const[tag, setTag] = useState([])

 function createCard(students, n ){
    return(
      <Card 
        key = {n}
        id= {n}
        firstName = {students.firstName}
        lastName = {students.lastName}
        pic = {students.pic}
        email= {students.email}
        company = {students.company}
        skill = {students.skill}
        grades = {students.grades}
        tag={tag}
        newTag={newTag}

    />
    )}


  function newTag(event){
    const createdTag = event.target.value;
    setTag(createdTag)
    console.log(createdTag)
  }

CodePudding user response：

if you want to map over an array in react you can use this approach

  const [students, setStudents] = useState([]);

  {students && students.map ( (student , idx) => 
       <Card
           key = {idx}
           onClick = { (e)=>{
               // add on specefic idx
               let auxiliaryArray = students
               auxiliaryArray = auxiliaryArray.filter( (ele , idx) => {
                  // add logic here
               })
               setStudents(auxiliaryArray)
           }}
        >
)}