1

I am creating a basic Todo app with ReactJS and I want to display the list of todos. I made a todo into a functional component and I create a TodoList component that should display the list. The problem is that when the add button is clicked, the todo is not added to the list and so the list is always empty.

Here's my App.js:

import React, {Component} from "react";
import "./App.css";
import axios from "axios";

const TodoForm = ({addTodo}) => {
  // Input tracker
  let input;

  return (
    <div>
      <input
    ref={node => {
      input = node;
    }}
      />
      <button
    onClick={() => {
      addTodo(input.value);
      input.value = "";
    }}
      >
    +
      </button>
    </div>
  );
};

const Todo = ({todo, remove}) => {
  // Each todo
  return <li onClick={remove(todo.id)}>{todo.text}</li>;
};

const TodoList = ({todos, remove}) => {
  // Map through the todos
  const todoNode = todos.map(todo => {
    return <Todo todo={todo} key={todo.id} remove={remove}/>;
  });
  return (
    <div className="list-group" style={{marginTop: "30px"}}>
      {todoNode}
    </div>
  );
};

const Title = () => {
  return (
    <div>
      <h1>Todo App</h1>
    </div>
  );
};

// Container component
window.id = 0;

class App extends Component {
  constructor(props) {
    // Pass props to parent class
    super(props);
    // Set initial state
    this.state = {
      data: []
    };
    this.apiUrl = ""; // my url goes here
    // Make HTTP requests with axios
    axios.get(this.apiUrl).then(res => {
      // Set state with result
      this.setState({data: res.data});
    });
  }

  // addTodo hanlder
  addTodo(val) {
    // Assemble data
    const todo = {text: val, id: window.id++};
    // Update data
    this.state.data.push(todo);
    axios.post(this.apiUrl, todo).then(res => {
      this.state.data.push(res.data);
      this.setState({data: this.state.data});
    });
  }

  render() {
    return (
      <div>
    <Title/>
    <TodoForm addTodo={this.addTodo.bind(this)}/>
    <TodoList
      todos={this.state.data}
      remove={this.handleRemove.bind(this)}
    />
      </div>
    );
  }
}

export default App;

Here's a screenshot of my app. The list should be displayed below the input text.

my app right now

I get 1 warning only, and no errors:

Line 86:  Expected to return a value at the end of arrow function  array-callback-return

I think it is somewhere in my addTodo function, but I am not sure at all. Can anyone help? Thanks.

4
  • u fount any error ?
    – sayalok
    Jan 17, 2019 at 4:44
  • @sayalok I have no error. There is 1 warning though. I'll update the question. Jan 17, 2019 at 4:47
  • u keep ur data in state can u console it on ur app ? i think u should pass this data by props.
    – sayalok
    Jan 17, 2019 at 4:59
  • Can you please create demo to reproduce your issue?
    – Just code
    Jan 17, 2019 at 5:01

2 Answers 2

1

In your addTodohandler you are using this.state.data.push in React this will not update the state

addTodo(val) {
    // Assemble data
    const todo = {text: val, id: window.id++};
    axios.post(this.apiUrl, todo).then(res => {
      const newData = {...this.state.data, res.data}
      this.setState({data: newData });
    });
1

as said by warl0ck , the push does update your array but it React's render method doesn't update when you mutate an array you need to return a new Array that detects change and hence render is called

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.