React state array adding values

Question

I'm sure it is something obvious and then I'll feel silly, but what am I missing here? I have something like:

export default class Questions extends Component {

  state = {
    questions: [{value: 'one'}, {value: 'two'}]
  };

  addQuestion = (question) => {
    let questions= this.state.questions
    let newQuestions = [...questions, {value: question}]
    this.setState({
      questions: newQuestions
    })
  };

  render() {
    return (
      <div>
        {this.state.questions.map((question, index) => <p key={index}>{question.value}</p>)}
        <button onClick={this.addQuestion.bind('three')}>Add</button>
      </div>
    )
  }

}

The initial state values show up fine, but when I click add I get a very long error from React about:

Uncaught Error: Invariant Violation: Objects are not valid as a React child...

So, what am I missing here?

Alexandr Lazarev · Accepted Answer · 2016-04-05 05:46:55Z

2

Most probably it should be:

{this.addQuestion.bind(this, 'three')}

Otherwise, you would not be able to access this.state in addQuestion:

let questions= this.state.questions

answered Apr 5, 2016 at 5:46

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

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

1 Comment

D Durham Over a year ago

Yes - that was it. Still getting used to the lexical this binding provided by ES6 arrow functions and where this is or is not needed. Thank you sir!

Collectives™ on Stack Overflow

React state array adding values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related