Why setState throw Objects are not valid as a React child?

Question

I have an error when trying to use this.setState(...)

  state = {
    results: {},
    isFinished: false,
    activeQuestion: 0,
    answerState: null,
    quiz: [],
    loading: true
  };

  async componentDidMount() {
    try {
      const resp = await axios.get(`/quizes/${this.props.match.params.id}.json`);
      const quiz = resp.data;
      this.setState({
        quiz,
        loading: false
      })
    } catch (e) {
      console.log(e);
    }
  }

My server request successful return an array, but when I trying to set it value into the local state I got the error:

Objects are not valid as a React child (found: object with keys {errorMessage, label, touched, valid, validation, value}). If you meant to render a collection of children, use an array instead. in span (at ActiveQuiz.js:9) in p (at ActiveQuiz.js:8) in div (at ActiveQuiz.js:7) in ActiveQuiz (at Quiz.js:109) in div (at Quiz.js:98) in div (at Quiz.js:97) in Quiz (created by Route) in Route (at App.js:16) in Switch (at App.js:13) in main (at Layout.js:37) in div (at Layout.js:24) in Layout (at App.js:12) in App (at src/index.js:10) in Router (created by BrowserRouter) in Brodetailuter (at src/index.js:9)

And ditail:

  21 | const resp = await axios.get(`/quizes/${this.props.match.params.id}.json`);   
  22 | const quiz = resp.data;   
  23 | 
> 24 | this.setState({   
  25 |   quiz,   
  26 |   loading: false   
  27 | })

If I logging quiz object I got [{}] in the console. And all the underlying components got props successfully.

  render() {
    return (
      <div className={classes.Quiz}>
        <div className={classes.QuizWrapper}>
          <h1>Please answere:</h1>
          {
            this.state.loading
              ? <Loader/>
              : this.state.isFinished
              ? <FinishedQuiz
                results={this.state.results}
                quiz={this.state.quiz}
                onRetry={this.onRetryHandler}
              />
              : <ActiveQuiz
                answers={this.state.quiz[this.state.activeQuestion].answers}
                question={this.state.quiz[this.state.activeQuestion].question}
                onAnswerClick={this.onAnswerClickHandler}
                quizLength={this.state.quiz.length}
                answerNumber={this.state.activeQuestion + 1}
                state={this.state.answerState}
              />
          }
        </div>
      </div>
    )
  }

I checked with debugger props into ActiveQuiz is correct.

Please, help me fix it. Why it can happen and how to fix it?

UPDATE 1

const ActiveQuiz = props => {
  debugger
  return (
    <div className={classes.ActiveQuiz}>
      <p className={classes.Question}>
      <span>
        <strong>{props.answerNumber}.</strong>&nbsp;
        {props.question}
      </span>

        <small>{props.answerNumber} из { props.quizLength }</small>
      </p>

      <AnswersList
        state={props.state}
        answers={props.answers}
        onAnswerClick={props.onAnswerClick}
      />
    </div>
  )
};

The error message clearly shows the cause is ActiveQuiz component. It would be more helpful if you show the render method of ActiveQuiz also — Firman Wijaya
Your problem looks like a collection inside ActiveQuiz - the error says you have a collection but it isn't really an array. I'm guessing the line numbers are off. — Kobi
whatever has structure of {errorMessage, label, touched, valid, validation, value} you should explicitly render that with wrapping with some tags/components. Currently you just trying to render it directly like <div>{this.props.whatever}</div> — skyboyer
most likely you are using an object in render in your ActiveQuiz component whereas it needs a react component — Aseem Upadhyay

Aseem Upadhyay Aseem Upadhyay · Accepted Answer · 2018-10-10T06:46:25

Your error states that it has encountered an object, due to which it is unable to render the output. It also states, that the error occurs at line <span>. Since your activeQuestion is an int. Hence your answerNumber prop shouldn't be at fault.

My guess would be, it has something to do with your data structure of props.question. Maybe what you are trying to render is an object / nested object due to which an error is thrown that it is not valid.

Hope it helps :)

Why setState throw Objects are not valid as a React child?

1 Answers