How do i use an if statement in react?

Question

I have a .jsx file, with:

<p_grid>
  <RangeSpan>
    Currently, there are {" "}
    <b>{Math.round(house.records * 100) / 100} houses</b> found.
  </RangeSpan>
</p_grid>

this works fine, but now I want to interrogate house.source and display different things, something like:

if ({house.source}=="X")
{
Currently, there are {" "} <b>{Math.round(house.records * 100) / 100} houses</b> found.
}
else
{
different calculation and text.
}

I can display house.source OK but cannot figure out how to do the if statement. Completely new to this so any help is appreciated (I tried using ternary operator but don't know how to combine it with {} and "" or even of it is OK to use in this context).

I think this explains your options: react-cn.github.io/react/tips/if-else-in-JSX.html — jmargolisvt
– jmargolisvt, Commented Oct 14, 2020 at 15:06

TKoL · Accepted Answer · 2020-10-14 15:11:41Z

3

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        shouldShow: true
    }
  }
  
  toggle() {
    this.setState(state => ({
       shouldShow: !state.shouldShow
    }));
  }
  
  render() {
    return (
      <div>
        {
          this.state.shouldShow
            ? (<p>yess, you should</p>)
            : (<p>no, you shouldn't</p>)
          }
          <button onClick={this.toggle.bind(this)}>toggle</button>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

This is a basic example

answered Oct 14, 2020 at 15:11

TKoL

13.9k4 gold badges49 silver badges87 bronze badges

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

Comments

Alexander Nied · Accepted Answer · 2020-10-14 15:10:01Z

2

You can't use an if/else statement directly in JSX, but you can do something like this:

<p_grid>
  <RangeSpan>
    {
        house.source === "X"
        && (<>Currently, there are {" "} <b>{Math.round(house.records * 100) / 100} houses</b> found.</>)
    }
    {
        house.source !== "X"
        && (<>different calculation and text.</>)
    }
  </RangeSpan>
</p_grid>

This can also be expressed as a ternary, as can be seen in TKol's answer.

If it is more involved than that, you can move the calculation higher up in the render method (or functional component) outside of the actual JSX return statement, or even encapsulate the functionality into its own component (Prebiusta's answer is a good example of this approach).

answered Oct 14, 2020 at 15:10

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

1 Comment

schoon Over a year ago

Exactly what I needed. Thanks!

Prebiusta · Accepted Answer · 2020-10-14 15:10:33Z

2

This is the official documentation for conditional rendering.

https://reactjs.org/docs/conditional-rendering.html

I would do something like this

class LoginControl extends React.Component {
  render() {
    let output = <p>Some other calculations</p>;

    if (house.source) {
      output = (
        <p>
          Currently, there are{" "}
          <b>{Math.round(house.records * 100) / 100} houses</b> found
        </p>
      );
    }

    return <div>{output}</div>;
  }
}

answered Oct 14, 2020 at 15:10

Prebiusta

4713 silver badges15 bronze badges

Comments

Mohan Krishna Sai · Accepted Answer · 2020-10-14 15:44:35Z

1

You cannot use if condition in JSX tags. (Have a look [here][1] for reason)   However, you can use terinary operator in JSX tags.

You can also run a function in JSX tags where in that function you can use if condition before return statement.

Have a look [here][2] for Code snippets

answered Oct 14, 2020 at 15:44

Mohan Krishna Sai

1902 silver badges9 bronze badges

Collectives™ on Stack Overflow

How do i use an if statement in react?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related