Rendering multiple components with condition

Question

I have an if-else-block in my render-function. I always get the error that my myattribute is an unresolved variable.

render: function() {
    return ({
        this.state.something.length ? (
             <h3>Selected products</h3>
             <Element myattribute={this.state.something}/>
        ) : ''
    })
}

Mayank Shukla · Accepted Answer · 2016-12-08 17:30:26Z

1

Reason is, you are returning more than one element if the condition is true, try this:

render() {
 return (
    <div>
      {
        this.state.something.length ? 
          <div>
             <h3>Selected products</h3>
             <Element myattribute={this.state.something}/>
          </div>
       : ''
      }
    </div>
  )
}

edited Dec 8, 2016 at 17:30

answered Dec 8, 2016 at 17:24

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Collectives™ on Stack Overflow

Rendering multiple components with condition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related