Как обновить состояние отдельного элемента на карте массива?

Question

Вот фрагмент моего кода. Он генерирует таблицу с возможностью отправки приглашения по электронной почте каждому человеку.

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>
                )
             }

По сути, есть кнопка для отправки приглашения по электронной почте каждому человеку в таблице и после отправки, которая указывает c кнопка должна исчезнуть и быть заменена подтверждением с надписью «Электронное письмо отправлено». Однако, поскольку состояние inviteSent не привязано к конкретному человеку, он обновляет все строки с помощью «Приглашение отправлено». Как мне сопоставить его с этим конкретным c человеком?

Answer 1

Вы должны сохранить список лиц в состоянии, каждый из которых имеет собственный атрибут «inviveSent». Когда приглашение было отправлено одному человеку, вы должны найти человека в списке, который необходимо обновить. Это может быть достигнуто, например, с помощью метода массива «map», который позволяет перебирать массив, чтобы найти один элемент, удовлетворяющий определенному c условию, например, человека с определенным идентификатором.

Answer 2

Вы можете добавить «отправлено приглашение» каждому (если возможно):

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