Home>

〇React beginner Todo list error

I just started studying React and tried to make a Todo list for practice, but I got an error. As a beginner, I examined books and online, but I couldn't do it at all.

The error appears like this:

×
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

I don't think you can pass props between components, but I don't know what to do.

The code is as follows.

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 (
      
         Todo list 
        <ToDoList tasks = {this.state.tasks} />
        <ToDoInput addText = {this.addText} />
      
    );
  }
}
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 (
      
        <input type = "text"
          value = {this.state.inputValue}
          onChange = {this.handleChange}
        />
        <button onClick = {this.handleClick}>Submit</button>
      
    );
  }
}
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 (, document.getElementById ('root'));
// If I 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 ();

I have been worried for days and am very in trouble. I would be happy if you could tell me how to solve it.

  • Answer # 1

    Hello

    How about correcting the ToDoList.jp problem source line as follows?

    Before correction
    const list = this.state.tasks.map (item =>

    {item.text}

    )
    After correction
    const list = this.props.tasks.map (item =>

    {item.text}

    )
    Remarks

    The currentToDoListis a state-unnecessary component, so it can be written with the following functional components:

    import React from 'react';
    const ToDoList = ({tasks}) =>(
      
        {tasks.map (item =>

    {item.text}

    )}    ); export default ToDoList;

    Codesandbox for operation check: https://codesandbox.io/s/nice-mahavira-y6xih