CODEWITHSUNDEEP
javascriptreactjs
schoon
schoon

Reputation: 3324

How do i use an if statement in react?

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).

Upvotes: 1

Views: 752

Answers (4)

Mohan Krishna Sai
Mohan Krishna Sai

Reputation: 190

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

Upvotes: 1

TKoL
TKoL

Reputation: 13892

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

Upvotes: 3

Prebiusta
Prebiusta

Reputation: 479

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>;
  }
}

Upvotes: 2

Alexander Nied
Alexander Nied

Reputation: 13623

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).

Upvotes: 2

Related Questions