Issue with adding style to element with reactjs

Question

I'm learning react and trying to add a class if a select element holds a value that I want to check against.

class App extends Component {
  test = 'volvo';
  render() {
    return (
      <select style={{marginTop: '30px', marginLeft: '20px'}}>
        <option value="volvo" className={test === 'volvo' ? "selected" : null}>Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    );
  }
}

It's giving me an error where on the line here I have the ternary operator. Can someone tell me the proper way of doing this please? Thanks!

What error are you getting?

Aron
– Aron

2017-07-07 11:31:18 +00:00
Commented Jul 7, 2017 at 11:31 — Aron
– Aron, Commented Jul 7, 2017 at 11:31

kind user · Accepted Answer · 2017-07-07 11:32:48Z

2

Since you are accessing a global variable inside the class, you have to use this keyword.

className={this.test === 'volvo' ? "selected" : null}

answered Jul 7, 2017 at 11:32

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

Strahinja Ajvaz Over a year ago

thank you! ill accept this as the correct answer when it allows me.

sameera lakshitha · Accepted Answer · 2017-07-07 11:51:44Z

1

In the global execution context (outside of any function), this refers to the global object. Try below code. You have to use this keyword.

class App extends Component {
test = 'volvo';
render() {
return (
  <select style={{marginTop: '30px', marginLeft: '20px'}}>
    <option value="volvo" className={this.test === 'volvo' ? "selected" : null}>Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  );
 }
}

edited Jul 7, 2017 at 11:51

answered Jul 7, 2017 at 11:41

sameera lakshitha

1,9814 gold badges23 silver badges29 bronze badges

Collectives™ on Stack Overflow

Issue with adding style to element with reactjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related