How to change styles based on state in React?

Question

JavaScript

I use styled-components and react, when you click on the button, you need to change its styles, here is an example https://codesandbox.io/s/ry52xp992m.

Answer 1

render() {
  const { isSelected } = this.state;
  const content = isSelected ? '1' : '0';

  return (
    <App>
      <Button
        onClick={this.handleClick}
        isSelected={isSelected}
      >
        Button
      </Button>
      <p>{content}</p>
    </App>
  );
}

In the example, div.App is replaced by StyledComponent App