Can i use multiple state value inside conditional rendering - ReactJs

Question

I wonder how can use two state based booleans inside of the conditional rendering . For example i want to render a certain <div> element if one of the conditions are truthy and otherwise don't render it Example :

{
 this.state.visible && this.state.checked &&
 <div>
  ...
 </div>
}

In order to display my error message i use this example , but init i have the .length of the object so it is easy to use like :

 {
  this.state.ErrorMessage.length > 0 &&
 <p>Error 404</p>
 }

Can somebody give me heads up ? I am a little bit confused .

To check if one of them are truthy you can use ||: (this.state.visible || this.state.checked) && <div>...</div> — Nick Parsons
– Nick Parsons, Commented Nov 26, 2019 at 10:44

Wai Ha Lee · Accepted Answer · 2019-11-26 13:16:13Z

2

You can follow your way by parenthesis, to check both are true:

{
    (this.state.visible && this.state.checked) &&  <div>...</div> 
}

if you want one of is true:

{
    (this.state.visible || this.state.checked) &&  <div>...</div> 
}

edited Nov 26, 2019 at 13:16

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Nov 26, 2019 at 10:51

DEEPAK

1,57415 silver badges24 bronze badges

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

1 Comment

PandaMastr Over a year ago

Yep mate the second expression does the job !

Emile Bergeron · Accepted Answer · 2019-11-26 15:39:29Z

0

Use it as a separate function which returns the components based on condition.

Example :

renderConditionalComponent() {
  const { visible, checked } = this.state;

  if (visible || checked) {
    return <Component1 />;
  }

  // There could be other condition checks with different components.
  // ...

  return null;
}

render() {
  // ...
  return (
    <div>
      {this.renderConditionalComponent()}
      {/* other components, etc */}
      <OtherComponent />
    </div>
  );
}

edited Nov 26, 2019 at 15:39

Emile Bergeron

17.5k5 gold badges85 silver badges133 bronze badges

answered Nov 26, 2019 at 10:56

Japar Sathik

1215 bronze badges

2 Comments

PandaMastr Over a year ago

The question was about the ternary operators .

Emile Bergeron Over a year ago

@PandaMastr your question is about conditional rendering, not about ternary. You even accepted an answer that doesn't use ternary at all, you're not mentioning ternary in your question, etc. This answer is a valid way to achieve conditional rendering.

Collectives™ on Stack Overflow

Can i use multiple state value inside conditional rendering - ReactJs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related