如何为数组 map 中的单个项目更新 state？

Question

Here's a snippet of my code. It generates a table with the option to sent an email invite to each person.

constructor(props){
    super(props)

    this.state={
        persons:[],
        inviteSent: false,
    }
}

async componentDidMount(){
   this.setState({
      patients:this.props.patients,
   })
}

sendInvite = async (person) => {
        let response = ***code to send email invite***

        if(response.ok){
           this.setState({
              inviteSent: true,
           })
        }       
    }

let personList = this.props.personList
    
        let persons = personList.map((person, index)=>
            {
                return (
                    <tr key={index}>
                        <td> 
                           {!this.state.inviteSent &&
                              <div onClick={()=>this.sendInvite(person)}>Send Invite</div>
                           }
                           {this.state.inviteSent &&
                              <div>Email Sent</div>
                            }
                        </td>
                    </tr>
                )
             }

Basically, there's a button to send an email invite to each person in the table, and once sent, that specific button should disappear and be replaced by a confirmation that says 'Email Sent'. However, since the state of inviteSent isn't mapped to the particular person, it updates all the rows with 'Invite Sent'. How do I map it to that specific person?

Answer 1

You can add 'inviteSent' to every person (if it possible):

persons:[
  {person: 'name', inviteSent: true},
  {person: 'name', inviteSent: false},
],

Answer 2

You have to store the list of persons in the state, each having an own „inviteSent“ Attribute. When an invite was sent to one person, you have to find the person in the list which shall be updated. This can be achieved for example using the array method „map“ which allows to iterate over an array to find the one item meeting a specific condition for example a person with a certain id.