&&の使い方
OOだったら、レンダーする。
{this.state.isActive == true && ( <Filter>filter</Filter> )}
黒色の要素を表示する時に、isActiveのステータスをみて表示するか否かを決める
import React, {Component, useState} from 'react'; import styled from 'styled-components' const Container = styled.div` width: 300px; margin: 0 auto; text-align: center; ` const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; ` const Filter = styled.div` width: 100px; height: 100px; background: black; color: white; ` class App extends React.Component { constructor(props) { super(props) this.state = { isActive: true } } render() { return( <Container> <h1>hello world</h1> <Button>クリック</Button> {this.state.isActive == true && ( <Filter>filter</Filter> )} </Container> ) } }