Rendering React components conditionally

react: render conditionally from props
react conditional render multiple elements
react render component onclick
react: use a ternary expression for conditional rendering
conditional rendering react native
conditional rendering react hooks
material-ui conditional rendering
react enum conditional rendering

I am struggling to to render certain fragment of react component. This is how my component looks like:

import XYZ from './XYZ.js';

class ABC extends React.Component{
  constructor(props, context){
    super(props, context);
      this.state = {
        showXYZ: false,
        showControl: false
      }
    }

  onshowClick = () => {
    this.setState({ showXYZ: true });
  };

  oncontrolClick = () => {
    this.setState({ showXYZ: true });
  };

  render() {
    return(
      {
        this.state.showXYZ
          ? <XYZ />
          : <div>
            <Button onClick={this.onshowClick}>SHOW</Button>
            </div> 
          <h1>Some text</h1>
          <p> More text </p>}
    )
  }
}

I want to render the same fragment when showControl is true also. Something like this:

return(
  {
    this.state.showControl
      ? <XYZ click = {this.props.oncontrolClick} />
       <div>
        <Button onClick={this.onshowClick}>SHOW</Button>
      </div>
      <h1>Some text</h1>
      <p> More text </p> :null
  }
)

Now the problem is how can I handle these two together at a time. I tried to use logical operators but seems not working.

Try multi ternary operator like shown below.

this.state.showXYZ ? <XYZ /> :  this.state.showControl ? <XYZ  click = {this.props.oncontrolClick} /> : 
  <div>
  <Button onClick={this.onshowClick}>SHOW</Button>
  </div>
  <h1>Some text</h1>
  <p> More text </p>
        <div>
           <Button onClick={this.onshowClick}>SHOW</Button>
        </div> 
       <h1>Some text</h1>
       <p> More text </p>

React Conditional Rendering, In a conditional render, a React component decides based on one or several conditions which DOM  In the end, we should be able to render React components conditionally, as shown below. Note that we will use placeholders for the TopNav and SideNav components: Conditional rendering of

You can only return one element from conditional statements. Either wrap them in div or React Fragment

return(
 <div>
  {
   this.state.showControl ? <XYZ  click = {this.props.oncontrolClick} /> :
   <div>
      <div>
      <Button onClick={this.onshowClick}>SHOW</Button>
      </div>
      <h1>Some text</h1>
      <p> More text </p>
   </div>
  }
 </div>
)

7 Ways to Implement Conditional Rendering in React Applications , In React-speak, it is a way to render different elements or components based on a condition. This concept is applied often in the following  Conditional rendering as a term describes the ability to render different UI markup based on certain conditions. In React-speak, it is a way to render different elements or components based on a condition. This concept is applied often in the following scenarios: Rendering external data from an API

Think of Ternary Operators as just shortened if statements, using || should fix your problem:

return(
  <div>
    { this.state.showControl || this.state.showXYZ 
      ? <XYZ click={this.props.oncontrolClick} /> : 
      <div>
        <Button onClick={this.onshowClick}>SHOW</Button>
      </div>
      <h1>Some text</h1>
      <p> More text </p>}
    } 
  </div>
)

Three ways to conditionally render components with React and JSX , Three ways to conditionally render components with React and JSX. Sometimes, you want to render a UI component only if a certain condition  Quick Tips: how to render components conditional? Hello again! I like to keep my promises — that is why in this quick tip, I will present a way to render different components when you click/chose a specific option from navigation.

Try this.

 render() {
      return (
    this.state.showXYZ || this.state.showControl
      ? <XYZ click={this.state.showControl?this.props.oncontrolClick:()=>{}}/>
      : <React.Fragment><div>
        <Button onClick={this.onshowClick}>SHOW</Button>
        </div> 
      <h1>Some text</h1>
      <p> More text </p></React.Fragment>
)

}

How to Conditionally Render React Components - Better , Conditional Rendering. We can conditionally render items in React components by using regular if or switch statements, or we can use the  If the information from the props is null or undefined, the React component returns null in the conditional rendering. There, a React component that returns null instead of JSX will render nothing. In this example, we have done the conditional rendering based on props, but the conditional rendering could be based on state and hooks too. Notice, how we didn't use the if statement inside the JSX yet but only outside before the return statement.

You forget to wrap else component in single div. Use this

<div>
  <div>
     <Button onClick={this.onshowClick}>SHOW</Button>
  </div>
  <h1>Some text</h1>
  <p> More text </p>
</div>

By the way You can use if conditions to make your life simple like :

render(){
if(this.state.showXYZ ||  this.state.showControl)
return(<XYZ click={this.state.showControl? this.props.oncontrolClick : null}/>) 

else 
{
return(
<div>
    <div>
      <Button onClick={this.onshowClick}>SHOW</Button>
    </div> 
    <h1>Some text</h1>
    <p> More text </p>
</div>
)
}


 }

5 Ways to Implement Conditional Rendering in React, This algorithm is what React uses to know when to avoid wasted renders. On the initial showA being true, the components are rendered  Introduction. In this post, I will show several ways to use conditionals while rendering HTML or components in JSX. Consider we have a component and based on a boolean flag we want to show or hide

8 conditional rendering methods in React, Higher-order components (HOCs). As an example of how all these methods work​, a component with a view/edit functionality will be implemented:. The eslint-rule is there to enforce good practices and proper usage of React hooks, therefore you should just move your hooks to the top and put your if right before you are ready to render some JSX. That'd be the best and right way to conditionally render a component which uses hooks. – goto1 Feb 18 at 21:51

4 React conditional rendering methods with props and state, But what if you want to render a specific HTML element or React component depending on a prop or state value? React render. no conditional example.

How to Show Components Conditionally in React, When it comes to conditional rendering with React, you have a lot of This will render the children of the component, only if the condition is met 

Comments
  • I guess Yes if else is the possible best solution. But see for state showXYZ i want to render XYZ. But for showControl state I need to render the JSX also besides passing oncontrolClick function as a prop. As you can see in my example. In your solution it is returning XYZ for both states and JSX if else condition
  • I updated my question also!! Can you demonstrate accordingly!!
  • You mean, you want to show <XYZ /> if showYXZ or showControl are true. otherwise else <div>
  • I want to render XYZ when state showXYZ is true and when state showControl becomes true, I want to pass some function as prop the to XYZ as well as render the JSX of component ABC, and do nothing when it is false as shown in my example
  • You mean for showXYZ you want to show <XYZ /> For showControl you wan to show <XYZ click = {this.props.oncontrolClick} />