Renaming the array elements and updating it to the reducers using reactjs - reactjs

Question

Hi Im trying to display the array with textbox for each element as shown in the image. The issue faced by me is when I enter the new name in textbox the same name is assigned for all the elements, so how do I overcome this issue, and save individual name for each current name. So this help in updating the database with new name.
class TablebackupName extends Component {
constructor(props) {
super(props);
this.state = {
tName: [pokemon, XXX, Batman],
bName: [newname : ''],
};
this.onNameEdited = this.onNameEdited.bind(this);
}
onNameEdited(event) {
this.state.bName.newname = event.target.value;
this.setState({ bName: this.state.bName });
};
render() {
return (
<div>
{this.state.tName.map(x =>
<input type="text" label={x} key={x.toString()} value={this.state.bName.newname} onChange={this.onNameEdited} />)}
</div>
);
}
}

Answer 1

Don't mutate state directly:
//wrong
this.state.bName.newname = event.target.value;
this.setState({ bName: this.state.bName });
//right
this.setState({ bName: {newName: event.target.value} });
You set the same state property for all of your map elements, so the state is shared.
I'd tackle it by setting defaultValue and then - on each update, just update the tName array with the new values.
export default class TablebackupName extends React.Component {
constructor(props) {
super(props);
this.state = {
tName: ["pokemon", "XXX", "Batman"]
};
this.onNameEdited = (index) => (event) => {
//using map to keep everything immutable
let element = event.target;
this.setState({
tName: this.state.tName.map((val, i) => i === index ? element.value : val)
})
};
}
// creating a higher order function to get the right index for later use.
render() {
return (
<div>
{this.state.tName.map((x, index) => {
return (
<div key={index}>
<label>{x}</label>
<input type="text" defaultValue="" onKeyUp={this.onNameEdited(index)}/>
</div>)
})}
</div>)
}
}
webpackbin: https://www.webpackbin.com/bins/-Ko7beSfn-FR__k94Q3k