ReactJS Conditional rendering is not working - reactjs

Question

I have an input and whenever a user clicks in the box I want to see if the input is greater than 1
updateQuery(e) {
this.setState({ query: e.target.value });
const optionValue = e.target.value.length;
}
Then I want to do the following in render / return:
render() {
const { query } = this.state;
return (
<div>
{optionValue > 1 ? (
<div className="loading">
) : (
<div className="not-loading">
)}
<NewSearch query={query} updateQuery={this.updateQuery} />
</div>
<Debounce ms={1000}>
<BusInfo query={query} />
</Debounce>
</div>
);
}
But I get this issue:
Line 48:6: Parsing error: Unexpected token ;
and my app won't run.
What am I missing here?
I've read this doc:
https://reactjs.org/docs/conditional-rendering.html
Help!

Answer 1

It seems that the only thing you need to change based a certain value of optionValue is the className of the div.
Hence, you can do something like this:
return (
<div>
<div className={optionValue > 1 ? 'loading' : 'not-loading'}>
<NewSearch query={query} updateQuery={this.updateQuery} />
</div>
<Debounce ms={1000}>
<BusInfo query={query} />
</Debounce>
</div>
);
Also, optionValue is a const of updateQuery and cannot be accessed later on your render. You should also add optionValue on your state:
updateQuery(e) {
this.setState({
query: e.target.value,
optionValue: e.target.value.length
});
}
And later on your render:
const { query, optionValue } = this.state;
or just check on your render query.length instead of holding a new value just for this on your state.
In case you have classes that you want to share on both cases, you could use template literals to achieve this:
<div className={`myClass1 myClass2 ${optionValue > 1 ? 'loading' : 'not-loading'}`}>

Answer 2

Don't define html tag like react component
Change this
{optionValue > 1 ? (
<div className="loading">True condition</div>
) : (
<div className="not-loading">False condition</div>
)}

Answer 3

Your opening and closing tags don't match up, you have an unmatched closing </div>
If the conditionally rendered divs don't have any content, that's fine but they do need to be self-closing: <div className="loading" /> (note the closing />)
This should now work fine (although you may need to do this.optionValue)
updateQuery(e) {
this.setState({ query: e.target.value });
this.optionValue = e.target.value.length;
}
render() {
const { query } = this.state;
return (
<div>
<div>
{this.optionValue > 1 ? (
<div className="loading" />
) : (
<div className="not-loading" />
)}
<NewSearch query={query} updateQuery={this.updateQuery} />
</div>
<Debounce ms={1000}>
<BusInfo query={query} />
</Debounce>
</div>
);
}