React.jsでsetStateの更新が行われない

Question

react.jsを学び始めたのですが、下記のコードで、handleMouseOver()を実行しても、何も変化が起きず、
tanakaという文字列の表示が行われたまま変化がありません。
利用している教材のサンプルのコードでは動いているのですが、どなたかご教示いただけますと幸いです。

import React, { Component } from 'react';
import Greeting from './greeting';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'tanaka',
    };
  }

  handleMouseOver(){
    this.setState({ name: 'Bob'});
  }

  handleMouseOut(){
    this.setState({ name: 'mike'});
  }

  render(){
    return (
      <div
        onMuoseOver={() => this.handleMouseOver()}
        onMuoseOut={() => this.handleMouseOver()}
      >
        <Greeting name = {this.state.name} />
      </div>
    );
  }
}

export default App;

Comments

[spookybird]

「適用されません」とは具体的にどうなるのですか？何もおきないですか？エラーが出ますか？

[sakai417]

ご回答ありがとうございます。何も起きない状態です。
tanakaという文字列は問題なく表示されています。

Answer 1

自分のミスでした。
よく見たらonMouseOverのスペルが間違えていました。

Comments

[spookybird]

ですね。
そして、onMouseOutの方にもhandleMouseOverメソッドが割り当てられています。
それから、このReactアプリケーションを画面表示した際に、しっかりコンソールにエラーが出ています。