React state variable is undefined inside render method

Question

I have a state variable dataSource that has some data in it.

In a parent component I have the following:

updateFeed = newItem => {
    this.setState({ dataSource: this.state.dataSource.data.unshift(newItem) })
    console.log(this.state.dataSource.data)
  }
  render() {
    console.log(this.state.dataSource.data)
    return (
      <React.Fragment>
        <Header />
        <Route
          path="/"
          exact
          component={props => (
            <Feed {...props} feedData={this.state.dataSource.data} updateFeed={this.updateFeed} />
          )}
        />
        <Route path="/profile/:id" exact component={props => <Profile {...props} />} />
      </React.Fragment>
    )
  }

updateFeed is called from the child component.

onSubmit = () => {
    const newPost = newData // some new data
    this.props.updateFeed(newPost)
  }

The updateFeed function is getting executed on submit, and the console.log is giving the updated data. But inside the render function this.state.dataSource.data is undefined. What am I missing here?

Why you are calling unshift? that mutate your state, which should be avoid. — Leo Li
– Leo Li, Commented Apr 23, 2018 at 20:40
then just use spread operator [newItem, ...this.state.dataSource.data] instead. If you mutate your state, your setState would not correctly working. — Leo Li
– Leo Li, Commented Apr 23, 2018 at 20:47

Jonas Wilms · Accepted Answer · 2018-04-23 20:37:59Z

1

You do dataSource: dataSource.data in your setState call, therefore dataSource.data in your render method will actually access dataSource.data.data which is probably undefined. May change updatedFeed to:

 updateFeed = newItem => {
    this.setState(prev => ({
       dataSource: {
           ...prev.dataSource,
           data: prev.dataSource.data.concat(newItem)
       }
    }));      
  }

Which ensures a pure state.

answered Apr 23, 2018 at 20:37

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

Comments

Zohaib Ijaz · Accepted Answer · 2018-04-23 20:41:40Z

1

It is because previously, this.state.dataSource is an object having key data. So even you are setting new value in updateFeed but in the very next line, state has not been updated yet. React does this asynchronously. so your log statement is showing old data.

You need to update state like this

const dataSource = this.state.dataSource;
dataSource.data.unshift(newItem);
this.setState({ dataSource: dataSource })

answered Apr 23, 2018 at 20:41

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

React state variable is undefined inside render method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related