CODEWITHSUNDEEP
arraysreactjsjsx
The Walrus
The Walrus

Reputation: 1208

How to render jsx correctly

<div className="feedback">
    {(this.state.finished) ? questions.map(function(x, index) { return
    <div>
    </div>
    }) : null}
</div>

so I have the above code at the moment. I would like to add in another piece of js code like this this.state.score but not within the map function as I only want it rendered once (currently it renders every time it maps over the array)

<div className="feedback">
    {(this.state.finished) ? {this.state.score} //WANT TO ADD IT HERE questions.map(function(x, index) { return
    <div>
    </div>
    }) : null}
</div>

but this doesn't work. so how can I add my code in here in this block? I need it inside the ternary too

Upvotes: 0

Views: 45

Answers (1)

jered
jered

Reputation: 11591

Ternary expressions in JSX must return either an array or a single node, similar to how the render method of React must return only a single node.

<div className="feedback">
    { (this.state.finished) ?
      <div>
        {this.state.score}
        {questions.map(function(x, index) {
          return <div></div>
        })}
      </div>
      :
      null
    }
</div>

Now, the ternary results in a single node (a <div>) that basically "wraps" all the things you want to conditionally render. Also, note that the questions.map is wrapped in curly braces {} because you're nesting inline JavaScript inside of JSX inside of even more inline JavaScript.

Upvotes: 2

Related Questions