How to check state inside styled-component?

Question

Instead of styling the Li 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?

const Li = styled.li`
  border: 0;

  //Set color to red if this component is selected
  ${this.state => 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 (
            <ul className={`list-group d-flex flex-row justify-content-center ${this.props.className}`}>
                {languages.map(function(lang){
                    return (
                        <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}`}>
                            {lang}
                        </Li>
                    )
                }, this)}
            </ul>
        );
    }
}

export default Popular;

code is based from tyler mcginnis - react fundamentals

Answer 1

Passing down isSelected as props then calling the css helper if true

const selectedLanguageStyle = css`
  color: '#d00d1b'
`

const Li = styled.li`
  border: 0;
  ${(props) => props.isSelected && selectedLanguageStyle}
`;

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 (
      <ul className={`list-group d-flex flex-row justify-content-center ${this.props.className}`}>
        {languages.map(function(lang){
          return (
            <Li
              key={lang}
              isSelected={lang === this.state.selectedLanguage}
              onClick={this.updateLanguage.bind(null, lang)}
              className={`list-group-item p-2 ${this.props.className}`}>
              {lang}
            </Li>
          )
        }, this)}
      </ul>
    );
  }
}

export default Popular;