import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {プロパティ名: 値};
  }
  
  render() {
    return (
      
        <div>
        {/* stateの値を取得するには「this.state.プロパティ名」を入れる*/}
          <h1>こんにちは、{this.state.プロパティ名}さん！</h1>
       </div>
    );
  }
}

export default App;

ボタンがクリックされた時に、名前の表示が切り替わるようにするには、stateの変更とonClickイベントを使う

▼Reactでは、下図のように「stateの値に直接代入することで値を変更してはいけない」という決まりがある。値を変更したい場合は、setStateを使う

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '名前１'};
    this.state = {name: '名前２'};
  }
  
  render() {
    return (
        <div>
          <h1>こんにちは、{<span style="color: #ff0000">this.state.name</span>}さん！</h1>
          {/* onClickの処理に、stateを変更する処理を加える */}
        <button onClick={() => {this.setState({name:'名前１'})}}>名前１</button>
        
        {/* onClickの処理に、stateを変更する処理を加える */}
        <button onClick={() => {this.setState({name:'名前２'})}}>名前２</button>
        
      </div>
    );
  }
}

export default App;

※this.setStateを使うときには（）のなかに｛｝を入れて変数を移植すること！

メソッドに役割を持たせる

▼handleClickメソッドがnameという引数を受け取るようにする。　そして、handleClickメソッドを呼び出す部分で、引数を渡す。　最後に、受け取った引数「name」を使って、stateのnameプロパティの値を変更

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '名前１'};
    this.state = {name: '名前２'};
  }
  
  // handleClickメソッドを定義（引数が値として渡され、h1タグのnameAに渡される）
  handleClick(nameA){
    this.setState({name: nameA});
  }
  
  render() {
    return (
        <div>
          <h1>こんにちは、{this.state.name}さん！</h1>
          {/* onClickイベント内の処理を、handleClickメソッドを呼び出す処理に書き換える*/}
        <button onClick={() => {this.handleClick('名前１')}}>名前１</button>
        
          {/* onClickイベント内の処理を、handleClickメソッドを呼び出す処理に書き換える*/}
        <button onClick={() => {this.handleClick('名前２')}}>名前２</button>
        
      </div>
    );
  }
}

export default App;

ボタンを押す毎に

タグ内の数がイベントにより１ずつカウントアップする

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
  }
  
  // handleClickメソッドを定義()
  handleClick(){
    this.setState({count: this.state.count + 1});
  }
  
  render() {
    return (
      <div>
        <h1>
          {this.state.count}
        </h1>
        {/* <button>タグ内でonClickイベントを追加してください */}
        <button onClick={() => {this.handleClick()}}>+</button>
        
      </div>
    );
  }
}

export default App;