score:1

Accepted answer

Have modified your code and the working example can be found here.

The changes can be found here:

toggle = (index, newname) => {
    this.setState((prevState, props) => ({
        // Return new array, do not mutate previous state.
        names: [
            ...prevState.names.slice(0, index),
            { name: newname },
            ...prevState.names.slice(index + 1),
        ],
    }));
}

render() {
    const names = this.state.names.map((name, index) => (
        // Need to bind the index so callback knows which item needs to be changed.
        <Card key={index} change={this.toggle.bind(this, index)} {...name} />
    ))

    return (
        <div>
            {names}
        </div>
    );
}

The idea is that you need to pass the index into the callback function via .bind, and return a new state array with the modified name. You need to pass the index so that the component knows which object to change the name to newname.

score:1

I would use this for the toggle method: 

toggle = (nameYouWantChanged, nameYouWantItChangedTo) => {

  this.setState({
    names: this.state.names.map(obj => 
      obj.name === nameYouWantChanged
        ? { name: nameYouWantItChangedTo }
        : obj
    )
  })

}

Related Query

More Query from same tag