title: Three option for displaying dynamical javascript with css
body: <p>Goal:<br />
  Value 1 show css &gt; badge-primary<br />
  Value 2 show css &gt; badge-secondary<br />
  The rest of the value show css &gt; badge-danger</p>
  <p>It take place at function handleChange.</p>
  <p>Problem:<br />
  I was only enable to use false or true in order to use css. It is only two option.<br />
  The third option should be available and how should it be solved?  Any suggestoin?</p>
  <p>Info:<br />
  *Newbie in reactjs</p>
  <p>Stackblitz:<br />
  <a href="https://stackblitz.com/edit/react-34tdvs" rel="nofollow noreferrer">https://stackblitz.com/edit/react-34tdvs</a>?</p>
  <hr />
  <p>css</p>
  <pre><code>h1,
  p {
    font-family: Lato;
  }
  
  .badge-primary {
    text-align: center;
    color: blue;
  }
  
  .badge-danger {
    font-size: 15px;
    color: red;
  }
  
  .badge-secondary {
    font-size: 15px;
    color: rgb(0, 204, 255);
  }
  </code></pre>
  <hr />
  <pre><code>import React from 'react';
  import './style.css';
  import React, { Component } from 'react';
  import axios from 'axios';
  
  export default class App extends Component {
    constructor() {
      super();
  
      this.state = {
        isLoaded: false,
        listData: [],
        list2Data: [],
        list3DataRaw: [],
        list3Data: [],
        value: true
      };
    }
  
    componentDidMount() {
      axios
        .get('https://jsonplaceholder.typicode.com/comments?postId=1')
        .then(response =&gt;
          this.setState({
            isLoaded: true,
            listData: response.data
          })
        );
  
      axios.get('https://jsonplaceholder.typicode.com/users').then(response =&gt;
        this.setState({
          isLoaded: true,
          list2Data: response.data
        })
      );
  
      axios.get('https://jsonplaceholder.typicode.com/todos').then(response =&gt;
        this.setState({
          isLoaded: true,
          list3DataRaw: response.data
        })
      );
    }
  
    handleChange = ({ target }) =&gt; {
      // copy current list of Item
      const list = [...this.state.list3DataRaw];
  
      if (1 == target.value) {
        this.setState({
          value: false
        });
      }
  
      if (1 != target.value) {
        this.setState({
          value: true
        });
      }
  
      // filter out item being deleted
      const updateList = list.filter(item =&gt; item.userId == target.value);
  
      this.setState({
        list3Data: updateList
      });
    };
  
    render() {
      const { isLoaded } = this.state;
  
      const locations =
        this.state.list2Data &amp;&amp;
        this.state.list2Data.map(location =&gt; {
          return { value: location.id, label: location.name };
        });
  
      const locationss =
        this.state.list3Data &amp;&amp;
        this.state.list3Data.map(location =&gt; {
          return { value: location.userId, label: location.title };
        });
  
      //console.log(locations);
      //console.log(locationss);
  
      if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
        return (
          &lt;&gt;
            &lt;select
              id=&quot;selectLocation&quot;
              value={locations.value}
              onChange={this.handleChange}
            &gt;
              {locations.map(({ value, label }, index) =&gt; (
                &lt;option value={value}&gt;{label}&lt;/option&gt;
              ))}
            &lt;/select&gt;
  
            &lt;select
              id=&quot;selectLocationn&quot;
              className={this.state.value ? 'badge-primary' : 'badge-danger'}
              value={locationss.value}
              onChange={this.handleChange}
            &gt;
              {locationss.map(({ value, label }, index) =&gt; (
                &lt;option value={value}&gt;{label}&lt;/option&gt;
              ))}
            &lt;/select&gt;
  
            &lt;table className=&quot;table&quot;&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Id&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Email&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {this.state.listData &amp;&amp;
                  this.state.listData.map(item =&gt; {
                    return (
                      &lt;tr key={item.id.toString()}&gt;
                        &lt;td&gt;{item.id}&lt;/td&gt;
                        &lt;td&gt;{item.name}&lt;/td&gt;
                        &lt;td&gt;{item.email}&lt;/td&gt;
                      &lt;/tr&gt;
                    );
                  })}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/&gt;
        );
      }
    }
  }
  </code></pre>