Javascript Question
Uncaught Invariant Violation: Objects are not valid as a React child
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}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?
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>
Source (Stackoverflow)