Prosta apka toDo w React.js [ankieta]

Question

Cześć,

Zrobiłem swoją pierwszą aplikację "todo", starałem się ją zrobić samodzielnie. Praktycznie wszystko działa, prócz usuwania elementów. Jak dodaje nowy element to wyświetla mi się wszystko, razem z dodaniem. Każdy dodany "task" ma oprócz tego checkbox- w zależności od zmiennej checked (true - zadanie zrobione, false - zadanie do zrobienia) pojawia się pod odpowiednim nagłówkiem, oraz button (usuń). Usuwanie następuje z jednym błędem, jeśli chce dodac nowy element to wyswietla mi wszystkie taski (nawet te usunięte). Niestety nie wiem jak ugryźć ten problem. Za wszelkie sugestie serdeczne dzieki, załączam kod - gdyby ktoś może zauważył jakieś błędy składniowe, logiczne, czy czysto semantyczne - jak nie powinno sie pisać w reacie, to prosze sie nie krepowac :D

Struktura plików:

app.js - z niego wyswietlane są komponenty TodoList, AddTodo

TodoList.js - odpowiedzialny za wyswietlanie poszczegolnych Itemów (tak nazwałem poszczególny task)

AddTodo - dodaje nowy task

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

let todos = [
  {
    id: 0,
    text: "Tekst 1",
    checked: true,
  },
  {
    id: 1,
    text: "Tekst 2",
    checked: false,
  },
  {
    id: 2,
    text: "Tekst 3",
    checked: false,
  },
  {
    id: 3,
    text: "Tekst 4",
    checked: false,
  },
  {
    id: 4,
    text: "Tekst 5",
    checked: false,
  },
  {
    id: 5,
    text: "Tekst 6",
    checked: false,
  },
];
let counter = 6;

class App extends Component {
  state = {
    todos: todos,
  };

  handleCheckbox = (id) => {
    const tasks = [...this.state.todos];
    tasks.forEach((task) => {
      if (task.id === id) {
        task.checked = !task.checked;
      }
    });
    this.setState({
      todos: tasks,
    });
  };

  handleClick = (id) => {
    let tasks = [...this.state.todos];
    tasks = tasks.filter((task) => task.id !== id);

    this.setState({
      todos: tasks,
    });
  };

  onSubmit = (text) => {
    const todo = {
      id: counter,
      text: text,
      checked: false,
    };
    counter++;
    todos.push(todo);

    this.setState({
      todos: todos,
    });
  };

  render() {
    return (
      <div id="flex-container">
        <AddTodo onSubmit={this.onSubmit} />
        <TodoList
          todos={this.state.todos}
          handleCheckbox={this.handleCheckbox}
          handleClick={this.handleClick}
        />
      </div>
    );
  }
}

export default App;

import React from "react";
import Item from "./Item";

const TodoList = (props) => {
  const done = props.todos.map((item) => {
    if (item.checked) {
      return (
        <Item
          key={item.id}
          id={item.id}
          text={item.text}
          checked={item.checked}
          handleCheckbox={props.handleCheckbox}
          handleClick={props.handleClick}
        />
      );
    }
  });

  const todo = props.todos.map((item) => {
    if (!item.checked) {
      return (
        <Item
          key={item.id}
          id={item.id}
          text={item.text}
          checked={item.checked}
          handleCheckbox={props.handleCheckbox}
          handleClick={props.handleClick}
        />
      );
    }
  });

  return (
    <div>
      <div>
        <h1>Taski niezrobione</h1>
        {todo}
      </div>
      <div>
        <h1>Taski zrobione</h1>
        {done}
      </div>
    </div>
  );
};

export default TodoList;

import React from "react";

const Item = (props) => {
  return (
    <div>
      <h2>{props.text}</h2>
      <input
        id="checkbox"
        type="checkbox"
        checked={props.checked}
        onChange={() => props.handleCheckbox(props.id)}
      />
      <label htmlFor="checkbox">
        {props.checked ? "Zrobione" : "Niezrobione"}
      </label>

      <button onClick={() => props.handleClick(props.id)}>usuń zadanie</button>
      <hr />
    </div>
  );
};

export default Item;

import React, { Component } from "react";

class AddTodo extends Component {
  state = {
    text: "",
  };

  handleTextChange = (e) => {
    const value = e.target.value;
    this.setState({
      text: value,
    });
  };

  onClick = (text) => {
    this.props.onSubmit(text);
  };

  render() {
    return (
      <div>
        <h1>Dodawanie nowego zadania</h1>
        <label
          htmlFor="text"
          style={{ display: "flex", flexDirection: "column" }}
        >
          Treść zadania
          <textarea
            name="text"
            id="text"
            cols="30"
            rows="10"
            onChange={this.handleTextChange}
          ></textarea>
        </label>
        <button onClick={() => this.onClick(this.state.text)}>
          Dodaj zadanie
        </button>
      </div>
    );
  }
}

export default AddTodo;

 

Brak odpowiedzi!

Answer 1

jakby co temat można zamknąć,

nie udało mi się dojść do błedu, ale napisałem od zera kolejną apkę i teraz wszystko działą :D