【REACT】stateを学びましょう！

概要

stateを理解し、使って見ましょう！

state?

REACTでstateは、Component内部で変えることができる値
REACTには、二種類のstateがあります。

• class型Componentが持っているstate
• 関数型ComponentでuseStateという関数で使うstate

class型Component

create-react-appや
https://codesandbox.io/?from-app=1
で、projectを作成しましょう

簡単な数字カウンター

count.js

import React, { Component } from "react";

class Count extends Component {
  constructor(props) {
    super(props);
    // stateの初期値を設定
    this.state = {
      number: 0
    };
  }

  render() {
    // stateを呼ぶとき使う
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            // setStateを使って、stateに新しいvalueを設定
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Count;

結果

関数型Component

Hi & Good bye

Say.js

import React, { useState } from "react";

const say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("Hello");
  const onClickLeave = () => setMessage("Good Bye");

  return (
    <div>
      <button onClick={onClickEnter}>Enter</button>
      <button onClick={onClickLeave}>Leave</button>
      <h1>{message}</h1>
    </div>
  );
};

export default say;

結果

問題

【Red】、【Blue】ボタンを追加して、ボタンをクリックしたら、
<h1>{message}</h1>の messageの色が変わるようにしましょう！

hint
styleを使いましょう！

正解