ReactJS Conditional rendering is not working

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!

I guess other than the points mentioned in the answers by others, you can simply just do this because all you want to do is change the className conditionally so:<div className={optionValue > 1 ? "loading" : "not-loading" > ... </div> — BlackSheep
– BlackSheep, Commented Jan 16, 2020 at 7:54
Apart from the first error, you will get an error for optionValue too, as it can't be accessed on your render. This value, should also be a part of your state. Check my answer below, where I analyze both of these issues. — Michalis Garganourakis
– Michalis Garganourakis, Commented Jan 16, 2020 at 8:00

Michalis Garganourakis · Accepted Answer · 2020-01-16 08:11:52Z

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'}`}>

edited Jan 16, 2020 at 8:11

answered Jan 16, 2020 at 7:52

Michalis Garganourakis

2,9401 gold badge14 silver badges25 bronze badges

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

3 Comments

Tired_Man Over a year ago

Michalis, thank you this is perfect, I have one more question tho. So the className with the condition. I need to add some other classes in but not in the conditional just normal css classed like <div className="more-classes" Need Conditional here>Content</div> - How does one do that? Thank you :)

Michalis Garganourakis Over a year ago

Updated my answer for this last part :)

Tired_Man Over a year ago

Thank you kind sir, this is perfect and actually, from your code snippets, I've just solidified my react knowledge so massive thank you, conditionals are a little clearer to me now. Sometimes, I find the react docs a little confusing! Cheers :)

akhtarvahid · Accepted Answer · 2020-01-16 07:41:08Z

1

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

answered Jan 16, 2020 at 7:41

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Comments

Aron · Accepted Answer · 2020-01-16 07:57:00Z

0

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

edited Jan 16, 2020 at 7:57

answered Jan 16, 2020 at 7:50

Aron

9,3187 gold badges37 silver badges60 bronze badges

3 Comments

Tired_Man Over a year ago

Hi Aron, this makes sense. I used the code provided and now I get : Line 23:11: 'optionValue' is assigned a value but never used no-unused-vars Line 31:10: 'optionValue' is not defined

Aron Over a year ago

Yeah that's because if you want to use optionValue in your render method you need to make it available to it, it can't just magically find it from inside another function. Put it on the component as this.optionValue = e.target.value.length and access it like this.optionValue ? ... : ...

Tired_Man Over a year ago

Thank you Aron for your answers and help :)

Collectives™ on Stack Overflow

ReactJS Conditional rendering is not working

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related