【React入門⑥】Stateを使ってコンポーネントに値を渡す

こちらの記事は、React入門チュートリアルです。

Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。

Stateとは

前回のチュートリアルで解説したpropsは、データを受け渡すための機能であり、いわば「不変のデータ」です。

しかし時には、状態によって値を変化させたい場合もあるはずです。

Stateはそもそも「状態」という意味があり、「変更可能な要素」として値を受け渡すことが可能です。

またStateは、設定したコンポーネント内でしか値を変更することはできません。

具体例は以下で見ていきましょう。

Stateを使ってみる

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root')); // コメントアウトを外す

// 省略

src/App.js

import React, {Component} from 'react';

class Greeting extends Component {
// Constructorで描画時にstateを読み込ませる
  constructor() {
// JSでConstructorを使用する際はsuper();の記述必須
    super();
    this.state = {
      time: false
    };
  }

  render() {
    return (
      <p>
// Stateの値によって表示を出し分ける
        {this.state.time ? 'Good Morning' : 'Good Afternoon'}
      </p>
    )
  }
}

export default Greeting;

このような形でStateの値によって表示の出し分けが可能となります。