Title: How do i use an if statement in react?
Tags: javascript;reactjs
Question: I have a .jsx file, with:
<p_grid&gt;
<RangeSpan&gt;
Currently, there are {&quot; &quot;}
<b&gt;{Math.round(house.records * 100) / 100} houses</b&gt; found.
</RangeSpan&gt;
</p_grid&gt;
this works fine, but now I want to interrogate house.source and display different things, something like:
if ({house.source}==&quot;X&quot;)
Currently, there are {&quot; &quot;} <b&gt;{Math.round(house.records * 100) / 100} houses</b&gt; found.
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 &quot;&quot; or even of it is OK to use in this context).
Comment: I think this explains your options: https://react-cn.github.io/react/tips/if-else-in-JSX.html

Here is the accepted answer: You can't use an if/else statement directly in JSX, but you can do something like this:
<p_grid&gt;
<RangeSpan&gt;
house.source === &quot;X&quot;
&amp;&amp; (<&gt;Currently, there are {&quot; &quot;} <b&gt;{Math.round(house.records * 100) / 100} houses</b&gt; found.</&gt;)
house.source !== &quot;X&quot;
&amp;&amp; (<&gt;different calculation and text.</&gt;)
</RangeSpan&gt;
</p_grid&gt;
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).
Comment for this answer: Exactly what I needed. Thanks!

Here is another answer: 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&gt;Some other calculations</p&gt;;
if (house.source) {
output = (
<p&gt;
Currently, there are{&quot; &quot;}
<b&gt;{Math.round(house.records * 100) / 100} houses</b&gt; found
</p&gt;
);
return <div&gt;{output}</div&gt;;

Here is another answer: 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



Here is another answer: class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
shouldShow: true
toggle() {
this.setState(state =&gt; ({
shouldShow: !state.shouldShow
}));
render() {
return (
<div&gt;
{
this.state.shouldShow
? (<p&gt;yess, you should</p&gt;)
: (<p&gt;no, you shouldn't</p&gt;)
}
<button onClick={this.toggle.bind(this)}&gt;toggle</button&gt;
</div&gt;
ReactDOM.render(<TodoApp /&gt;, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;</script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;</script&gt;
<div id="app"&gt;</div&gt;
This is a basic example

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:10/14/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs>', 'Title': 'How do i use an if statement in react?', 'ViewCount': 316, 'id': 64356211, 'user_AboutMe': '', 'user_AccountId': 1975776.0, 'user_DisplayName': 'schoon', 'user_Reputation': 2564.0, 'user_Views': 451.0, 'user_id': 1773592.0}}