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

Question

I get this error and I have no idea why but it's not happy with the following line:

<p className="bold blue padding-left-30">{question}</p>

It's not liking the {question} portion of the above paragraph.

from:

const Questions = Component({
    render(){
        var questions = this.props.questions;
        questions = questions ? questions.map(
            (question) =>
                <div className="all-100 align-left">
                    <p className="bold blue padding-left-30">{question}</p>
                    <blockquote className="margin-left-50 medium fw-300">{question.answer ? question.answer : ""}</blockquote>
                </div>
        ): "";

        return(<div>{questions}</div>);
    }
});

Here's what the questions array portion looks like from json:

"questions": [
        {
          "question": "This is Question 1",
          "answer": [
            "blah blah blah 1"
          ]
        },
        {
          "question": "This is Question 2",
          "answer": [
            "blah blah blah 2"
          ]
        },
        {
          "question": "This is Question 3",
          "answer": [
            "blah blah blah 3"
          ]
        }
      ]

The answer prints out fine but that's done by another react component called <Answer />.

So what does that mean? invariant violation in my case?

Ben Hare · Accepted Answer · 2016-07-17 04:33:04Z

2

At that point question is an object, since you're mapping over it, and you're trying to use it inside of JSX, which isn't allowed. Did you mean to do

<p className="bold blue padding-left-30">{question.question}</p>

answered Jul 17, 2016 at 4:33

Ben Hare

4,4355 gold badges30 silver badges46 bronze badges

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

Comments

Piyush.kapoor · Accepted Answer · 2016-07-17 04:42:42Z

0

You are passing the full question object in the p tag

<p className="bold blue padding-left-30">{question.question}</p>

answered Jul 17, 2016 at 4:42

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

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