WTF WTF - 4 months ago 8
Javascript Question

invariant.js:39Uncaught Invariant Violation: Objects are not valid as a React child

I get thie 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 .

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

Answer

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>