How can I update certain object in state with new data - reactjs

Question

I am making a notes taking application with React, when I click on a note in sidebar it opens in content area, then while changing text it updates the notes state, updates the current opened note with the current content inside the input area.
Can I do it with spread operator?
here is the full code on codesandbox
class App extends React.Component {
constructor() {
super();
this.state = {
notesList: [
{key: 0, title: "title of first note", note: "this is the first note"},
{key: 1, title: "title of second note", note: "this is another note"}
],
inputValue: null,
currentKey: null
};
}
noteTitleClicked = value => {
this.setState({
inputValue: value.note,
currentKey: value.key
});
};
updateNoteDetails = e => {
this.setState({
inputValue: e.target.value
});
};
render() {
const notes = this.state.notesList.map(note => (
<li key={note.key} onClick={e => this.noteTitleClicked(note)}>
{note.title}
</li>
));
const inputValue = this.state.inputValue;
return (
<div className="App">
<header>Header</header>
<div className="main">
<article>
{inputValue == null ? (
""
) : (
<input
className="noteDetails"
value={this.state.inputValue}
onChange={this.updateNoteDetails}
/>
)}
</article>
<nav>
<ul>{notes}</ul>
</nav>
</div>
<footer>Footer</footer>
</div>
);
}
}

Answer 1

Try this:
updateNoteDetails = e => {
const updated = this.state.notesList.map(n => {
if (n.key === this.state.currentKey)
return { ...n, note: e.target.value };
return n;
});
this.setState({
inputValue: e.target.value,
notesList: updated
});
};
This this is the demo: https://codesandbox.io/s/k591vor8v3