React 〜〜だったらレンダーする

&&の使い方

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>
    )
  }
}