In ReactJS todo app I am trying to set input field text state into another state which is array of objects

Question

I am doing simple todo app. I have 1 input box and Add button. On typing into input box and clicking Add button the text is displayed in a list below. I am using below constructor:

    class Entry extends Component {
        constructor() {
            super()
            this.state = {
                st_search_field: '',
                st_lists: [
                    { 
                      list_id: new Date(`enter code here`), 
                      list_name: ''
                    }
                ]
            }
         }

Now I create list_handler = () => {...... } function to set search_field text into list_name value. I use list_handler method during onClick for Add button. I have started by using const join = Object.assign({}, this.state) in list_handler function and tried using this.setState({st_lists.list_name: this.state.st_searh_field}) but st_lists.list_name is marked in red in VS editor. Tried this.state.st_lists.map(li => {}) above setState method but even that gives error.

Answer 1

you can't set state on one of states sub objects do it like this:

  const st_lists = this.state.st_lists;
  st_lists.list_name = this.state.st_search_field;
  this.setState({st_lists});

Answer 2

st_lists.list_name is not a key, you need to add merge the object

this.setState({
    st_lists: [
        {
            ...this.state.st_lists,
            list_name: this.state.st_searh_field,
        },
    ]
})