title: How to check state inside styled-component?
body: <p>Instead of styling the <code>Li</code> component via inline style, I want to do it via styled-component. How can I check the state and then assign the color red if the current Li is the selected language?</p>
  
  <pre><code>const Li = styled.li`
    border: 0;
  
    //Set color to red if this component is selected
    ${this.state =&gt; this.state.selectedLanguage`
      color: 'red';
    `}
  
  `;
  
  class Popular extends Component {
      constructor(props) {
          super(props);
          this.state = {
              selectedLanguage: 'All'
          }
  
          this.updateLanguage = this.updateLanguage.bind(this);
      }
  
      updateLanguage(lang) {
          this.setState(function() {
              return {
                  selectedLanguage: lang
              };
          });
      }
      render() {
          const languages = ['All', 'Javascript', 'Java', 'Go', 'Rust'];
          return (
              &lt;ul className={`list-group d-flex flex-row justify-content-center ${this.props.className}`}&gt;
                  {languages.map(function(lang){
                      return (
                          &lt;Li
                              key={lang}
                              // style={lang === this.state.selectedLanguage ? {color: '#d00d1b'} : null}
                              onClick={this.updateLanguage.bind(null, lang)}
                              className={`list-group-item p-2 ${this.props.className}`}&gt;
                              {lang}
                          &lt;/Li&gt;
                      )
                  }, this)}
              &lt;/ul&gt;
          );
      }
  }
  
  export default Popular;
  </code></pre>
  
  <p>code is based from <a href="https://github.com/tylermcginnis/react-fundamentals" rel="nofollow noreferrer">tyler mcginnis - react fundamentals</a></p>