犬猫スイッチ

以下の画像のようなものをイメージに作ります．

#STEP1　ボタンの作成
App.jsとapp.cssを用意し，その中に以下のプログラムを入力し，ボタンを作成する

###App.js

import React, {Component} from 'react';
import './app.css';

class App extends Component{
  render(){
    return(
      <div>
        <h1>犬</h1>
        <div className='buttons'>
          <button>犬</button>
          <button>猫</button>
        </div>
      </div>
    );
  }
}
export default App

###app.css

h1{
  text-align: center;
}

.buttons {
  margin-top: 40px;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

button {
  display: inline-block;
  font-size: 16px;
  width: 200px;
  height: 48px;
  border-radius: 48px;
  margin-right: 24px;
  margin-left: 24px;
  color: #fff;
  background-color: #66ccff;
  border: none;
  outline: none;
  box-shadow: 4px 4px #d8d8d8;
  cursor: pointer;
}

button:active {
  position: relative;
  top: 4px;
  left: 4px;
  box-shadow: none;
}

すると

ができました．

#STEP2　犬と猫の表示切り替え
犬と猫のボタンを押すことでStateを更新して表示させます．

###初期状態の定義
constructorとsuperで構成される定番の形の中でstateを定義します．
そしてstateを表示させるために<h1>犬</h1>を<h1>{}</h1>

class App extends Component{
  constructor(){
    super();
    this.state={name: '犬or猫'}
  }
  render(){
    return(
      <div>
        <h1>{this.state.name}犬</h1>
  省略
}

###ボタンの実装

handleClick=()=>{処理}をベースにボタンを以下のように実装しました．

handleDogClick=()=>{
    this.setState({name:'犬'});
  }
  handleCatClick=()=>{
    this.setState({name:'猫'});
  }

省略

   <button onClick={this.handleDogClick}>犬</button>
   <button onClick={this.handleCatClick}>猫</button>

#　完成

import React, {Component} from 'react';
import './app.css';

class App extends Component{
  constructor(){
    super();
    this.state={name: '犬or猫'}
  }
  
  handleDogClick=()=>{
    this.setState({name:'犬'});
  }
  handleCatClick=()=>{
    this.setState({name:'猫'});
  }


  render(){
    return(
      <div>
        <h1>{this.state.name}</h1>
        <div className='buttons'>
          <button onClick={this.handleDogClick}>犬</button>
          <button onClick={this.handleCatClick}>猫</button>
        </div>
      </div>
    );
  }
}
export default App