CODEWITHSUNDEEP
reactjs
tarek hassan
tarek hassan

Reputation: 802

How can I update certain object in state with new data

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

Upvotes: 0

Views: 34

Answers (1)

Tu Nguyen
Tu Nguyen

Reputation: 10179

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

Upvotes: 1

Related Questions