Cannot read property 'concat' of undefined React JS

Question

Trying to add an object into an array within the state of this component, unable to concat the new object to array without a 'property undefined' error.

I have been able to get this to work with a 'shallow' state with an array but would like to have , would prefer to have it work with separate array inside.

The state

    constructor(props) {
      super(props);
        this.state = {
          show: false,
          id: null,
          name: 'New Task',
          timerOn: false,
          seconds: 0,
          minutes:0,
          hours:0,
          complete: {
            todayId: null,
            list: []
          }
        }
      }

Method for updating state, making a copy of the 'controls' (minutes, seconds, start etc) resetting the state back to it's initial values taking a copy of the state and applying it to the array:

    completeTaskHandler = () => {
      if (this.state.seconds === 0 && this.state.minutes === 0 && this.state.hours === 0) {
        alert('Please Provide a name');
      }
      else {
        const end = new Date();
        let finishedTask = new Object ({
          start: this.state.id,
          end: end,
          name: this.state.name,
          seconds: this.state.seconds,
          minutes: this.state.minutes,
          hours: this.state.hours,});

        this.setState((prevState,props) => {
          return {
            start: null,
            show: false,
            id: null,
            name: 'task',
            timerOn: false,
            seconds: 0,
            minutes:0,
            hours:0,
            complete: prevState.complete.list.concat(finishedTask)
          }
        });
        clearInterval(this.interval);
      }
    }

Try to log 'prevState.complete.list' and see if it's the object you expect it to be (an array) — Velimir Tchatchevsky
– Velimir Tchatchevsky, Commented Sep 6, 2018 at 16:31
Since list is an array. Change to complete: [...prevState.complete.list, finishedTask] — Hemadri Dasari
– Hemadri Dasari, Commented Sep 6, 2018 at 16:39

Hemadri Dasari · Accepted Answer · 2018-09-06 16:41:10Z

1

You are doing concat on an array. Since list is an array.

Use previous state to push new value to an array. Check below solution for better understanding

  this.setState((prevState,props) => {
      return {
        start: null,
        show: false,
        id: null,
        name: 'task',
        timerOn: false,
        seconds: 0,
        minutes:0,
        hours:0,
        complete: [...prevState.complete.list, finishedTask]
      }
    });

answered Sep 6, 2018 at 16:41

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot read property 'concat' of undefined React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related