Q:

React: How to modify a state variable by matching against the value of another state variable

I am building a front end for a facial recognition app, and it is my first time using react. I am having a hard time working out how to match the value of one of my state variables to another as a way of identifying what object to modify the state of. Let me lay out the scenario.
I have state variables defined that look like this:
this.state = {current_name: '', correct: 0,
    people: [
    {name: 'Alice', here: "Not Here"},
    {name: 'Bob', here: "Not Here"}]}
The string "current_name" gets updated every half second by making a request to an external endpoint to stream who is in frame. I also have a handler for updating state that looks like this:
  CorrectHandler(){
this.setState(prevState =>({
  correct: prevState.correct + 1
}));}

which I am triggering with an "onclick" event in my app.
What I would like to be able to do is include in my handler a function to identify a person by the value of their name i.e. "Bob", and change the state of "here" atribute to to a new string.
It seems like there is probably a very simple solution to this but I'm too new to react and javascript to see it. Any advice would be greatly appreciated!

A:

I'd say the best way to do this is using Array.map() and Object.assign() to change your people array into one with new values, like this:
function updateSpecificPerson(person) {
    if ( person.name === "Bob" ) {
        //it's Bob! Make a shallow copy of him with his new "here" value
        return Object.assign({}, person, { here: "somewhere" });
    }
    // it's not Bob - leave the object alone
    return person;
}

this.setState(prevState => {
    return {
       //copy over all the people, except Bob, who gets modified during copy
       people: prevState.people.map(updateSpecificPerson)
    };
});

Should be straightforward to change Bob and somewhere to variables you control.

