ReactJS Conditional not working?!

#1

Hi there,

I have in input and when 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:

Help!

#3

Solved it here:

export default class New extends Component {
  constructor() {
    super();

    this.updateQuery = this.updateQuery.bind(this);

    this.state = {
      query: ''
    };
  }

  updateQuery(e) {
    this.setState({
      query: e.target.value,
      optionValue: e.target.value.length
    });
  }

  render() {
    const { query, optionValue } = this.state;

    return (
      <div>
        <br />
        <div className={`main-grid ${optionValue > 1 ? 'loading' : 'not-loading'}`}>
          <NewSearch query={query} updateQuery={this.updateQuery} />
        </div>
        <Debounce ms={1000}>
          <BusInfo query={query} />
        </Debounce>
      </div>
    );
  }
}

:slight_smile:

#4

Thanks for the help, I’ve solved it :slight_smile: Cheers!!

#5