前提・実現したいこと
ReactとMaterialUIの勉強を進めています。
押下すると数値をカウントアップするボタンが作りたいのですが、npm run devでビルドを行った後、Firefoxで動作を確認するとコンソールにエラーが表示され、ボタンが表示されない状態です。
JavaScript自体が初心者のため、どのようにエラー原因を特定していけばよいのか分かりません。
エラー原因の特定方法をご教示頂けないでしょうか。
発生している問題・エラーメッセージ
該当のページを表示するとFirefoxのコンソールに下記のエラーが表示されます。
The above error occurred in the <Mybutton> component: in Mybutton Consider adding an error boundary to your tree to customize error handling behavior. Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:14226:5 [メッセージの詳細を表示または隠します。] TypeError: classes is undefined[詳細] main.js line 1778 > eval:52:19
該当のソースコード
JavaScript
1// ★index.js 2import App from "./components/App";
JavaScript
1// ★App.js 2import React from "react"; 3import ReactDOM from "react-dom"; 4 5// ボタン追加 6import Mybutton from "./Mybutton"; 7 8const form = document.getElementById("form"); 9form ? ReactDOM.render(<Mybutton />, form) : null;
JavaScript
1// ★Mybutton.js 2import React from 'react'; 3import Button from '@material-ui/core/Button'; 4 5export default class Mybutton extends React.Component { 6 7 constructor(props) { 8 super(props); 9 this.state = { count: 0 }; 10 }; 11 12 handleClick() { 13 const c = this.state.count + 1; 14 this.setState({ 15 count: c, 16 }); 17 }; 18 19 render() { 20 const { classes } = this.props; 21 return ( 22 <div className={classes.root}> 23 <b>{this.state.count}</b> 24 <Button color="primary" onClick={this.handleClick}> 25 ADD! 26 </Button> 27 </div> 28 ); 29 }; 30}
試したこと
googleで検索してみましたがよく分かりませんでした。
補足情報(FW/ツールのバージョンなど)
Firefox 61.0.1
package.jsonのDependencies
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"weak-key": "^1.0.0",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"@material-ui/core": "^1.4.0"
}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/27 11:55 編集