Include multiple components and <div> in if statement in React

Question

I am trying to include multiple componentsand <div> in React under one ´if´ statement. Since React only returns one element it requires all components and/or <div> elements to be wrapped in one root <div> element. Tried but still couldn't manage.

I need to have <Divider> component and <div className="prod-flow"> inside the the conditional statement. This means I need to hide the entire block if the condition is false. Currently <Divider> component can't be hidden since it's outside the if statement. Don't want to use same condition twice to validate.

Tried : Wrapping all the elements with one <div> - didn't work. Wrapping the entire block with [] inside {} - didn't work.

        <Divider text="PRODABC" className="blue" />
        <div className="prod-flow">
           {supplyProducts(this.state.products).length > 0 &&
             <FlowSettings
               flow={this.state.room.attributes.flow}
               products={supplyProducts(this.state.products)}
               setpointChange={this.handleSetpointChange}
               sumChange={this.handleSumChange} />
           }
        </div>

Need: Something like

return(
   <div>
     <Component1 />
     <div>
     ...
     ...
     </div>

     {supplyProducts(this.state.products).length > 0 &&
     ...
     ... //<Component2 />
     ... //<div>
          //<Component3 />
     ... //</div>
     }
  </div>
  );

Elumalai Kaliyaperumal · Accepted Answer · 2017-09-26 09:42:07Z

3

Put wrapper on conditional render!

return(
   <div>
     <Component1 />
     <div>...</div>
     {supplyProducts(this.state.products).length > 0 &&
       <div> //Wrapper here
         <Component2 />
         <div>...</div>
         <Component3 />
         <div>...</div>
       </div>
     }
  </div>
);

answered Sep 26, 2017 at 9:42

Elumalai Kaliyaperumal

1,5301 gold badge13 silver badges24 bronze badges

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

Comments

Adeel Imran · Accepted Answer · 2017-09-26 09:31:45Z

0

in your render method do something like this.

render () {

   const renderMore = () => (
       <div>
         <Component1/>
         <div></div>
         <Component2/>
       </div>
   );

   return () (
       <div>
       <Component1 />
       <div>
       ...
       ...
       </div>
      {supplyProducts(this.state.products).length > 0 && renderMore()}
   )
}

answered Sep 26, 2017 at 9:31

Adeel Imran

14.1k8 gold badges66 silver badges80 bronze badges

Collectives™ on Stack Overflow

Include multiple components and <div> in if statement in React

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