React 初心者 Todoリスト エラー

Question

〇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();

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

Answer 1

こんにちは

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

修正前

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

修正後

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

備考

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

import React  from 'react';

const ToDoList = ({ tasks }) => (
  <ul>
    {tasks.map(item => <li key={item.id}>{item.text}</li>)}
  </ul>  
);

export default ToDoList;

• 動作確認用Codesandbox: https://codesandbox.io/s/nice-mahavira-y6xih

Comments

[chigu4ps5]

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

[jun68ykt]

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