if statement is a fine way to conditionally render a component

Solutions on MaxInterview for if statement is a fine way to conditionally render a component by the best coders in the world

Search
showing results for - "if statement is a fine way to conditionally render a component"
Monica
28 Jul 2016
1class LoginControl extends React.Component {
2  constructor(props) {
3    super(props);
4    this.handleLoginClick = this.handleLoginClick.bind(this);
5    this.handleLogoutClick = this.handleLogoutClick.bind(this);
6    this.state = {isLoggedIn: false};
7  }
8
9  handleLoginClick() {
10    this.setState({isLoggedIn: true});
11  }
12
13  handleLogoutClick() {
14    this.setState({isLoggedIn: false});
15  }
16
17  render() {
18    const isLoggedIn = this.state.isLoggedIn;
19    let button;
20    if (isLoggedIn) {      button = <LogoutButton onClick={this.handleLogoutClick} />;    } else {      button = <LoginButton onClick={this.handleLoginClick} />;    }
21    return (
22      <div>
23        <Greeting isLoggedIn={isLoggedIn} />        {button}      </div>
24    );
25  }
26}
27
28ReactDOM.render(
29  <LoginControl />,
30  document.getElementById('root')
31);
source
similar questions
react native conditional renderingif else condition inside react native returnhow to use if else inside jsx in reactreact js if statementreact conditional classnameconditional operatorreact multiple if statement in stylejsx if blockconditional rendering in react js stackoverflowconditional rendering reactenzye check if it rendersreact if statementreact spread attributes conditionallyconditional style reactconditional props reactconditional operatormake a if in jsxfunctional not if then elsehow do i conditionally add attributes to react components 3freact conditional classconditional jsx property
queries leading to this page
how to write if condition in render reacthow do i create conditional component on reactcomponents conditional renderingconditional render reactrunning conditional statement in reacthow do i create conditional component in reacthow to do conditional returns javascript reactif statement conditional renderinginline if else with conditional operator in functional componentrender condition reactrender conditionalyrender jsx conditionallyif condition html reactjs renderingcan i render a component conditionalyhow to conditionally render in htmlconditional return reactif statement is a fine way to conditionally render a component