質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

622閲覧

React 初心者 Todoリスト エラー

chigu4ps5

総合スコア7

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/12/02 13:22

〇React 初心者 Todoリスト エラー

私はReactの勉強をを始めたばかりで、練習のためにTodoリストを作ってみようとしたのですが、エラーが出てしまいます。初心者なりに本やネットで調べてみたのですが、全く出来ませんでした。

エラーはこのように出ています。

× TypeError: Cannot read property 'tasks' of null ToDoList.render src/ToDoList.js:9 6 | super(props); 7 | } 8 | render() { > 9 | const list = this.state.tasks.map( item => <li key={item.id}>{item.text}</li>) | ^ 10 | return ( 11 | <ul> 12 | {list} View compiled

恐らくコンポーネント間のpropsの受け渡しができていないように思いますが、どうすれば良いのか分かりません。

コードは以下のようにしています。

App.js

import React, {Component} from 'react'; import ToDoInput from './ToDoInput'; import ToDoList from './ToDoList'; class App extends Component { constructor(props) { super(props); this.state = { tasks: [ { text: "", id: 0, } ], uniquId: 1 }; this.addText = this.addText.bind(this); } addText(text) { const { tasks ,uniquId} = this.state; tasks.push({ text, id: uniquId }); this.setState({ tasks, uniquId: uniquId + 1 }); } render() { return ( <div> <h1>Todoリスト</h1> <ToDoList tasks={this.state.tasks}/> <ToDoInput addText={this.addText} /> </div> ); } } export default App;

ToDoInput.js

import React, {Component} from 'react'; class ToDoInput extends Component { constructor(props) { super(props); this.state = { inputValue: "", }; this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange(e) { this.setState({ inputValue: e.target.value }); } handleClick() { const inputValue = this.state.inputValue; this.props.addText(inputValue); } render() { return ( <div> <input type="text" value={this.state.inputValue} onChange={this.handleChange} /> <button onClick={this.handleClick}>送信</button> </div> ); } } export default ToDoInput;

ToDoList.jp

import React, { Component } from 'react'; class ToDoList extends Component { constructor(props) { super(props); } render() { const list = this.state.tasks.map( item => <li key={item.id}>{item.text}</li>) return ( <ul> {list} </ul> ); } } export default ToDoList;

index.jp

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

何日も悩んでいて、非常に困っています。解決方法を教えていただけると嬉しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

ToDoList.jp の問題の発生元の行を、以下のように修正してみるといかがでしょうか?

修正前

jsx

1const list = this.state.tasks.map( item => <li key={item.id}>{item.text}</li>)

修正後

jsx

1const list = this.props.tasks.map( item => <li key={item.id}>{item.text}</li>)

備考

現状のToDoList は state 不要なコンポーネントなので、以下のような関数コンポーネントで書くこともできます。

jsx

1import React from 'react'; 2 3const ToDoList = ({ tasks }) => ( 4 <ul> 5 {tasks.map(item => <li key={item.id}>{item.text}</li>)} 6 </ul> 7); 8 9export default ToDoList;

投稿2019/12/02 13:49

編集2019/12/02 13:59
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chigu4ps5

2019/12/02 14:58

ご丁寧に備考まで教えてくださり、本当にありがとうございました。 教えていただいた部分を訂正し、多少コードを改良したところ、かなり改善され、無事にこのようなTodoリストを作成できました。本当にありがとうございました。 https://i.gyazo.com/7faa370663c98067223b30e8f6aacd2a.gif
jun68ykt

2019/12/03 01:04

どういたしまして。 gyazo の画像も拝見しまして、 > 無事にこのようなTodoリストを作成できました。 とのことで、よかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問