Нужно создать функцию, которая будет добавлять в state элемент, ниже я пытался реализовать это в функции AddTask

Question

Нужно, чтобы в state.tasks добавлялся элемент с id и значением(строкой), ниже у меня написано это в функции addTask(очень криво наверное, но я новичок), возможно, в этой функции много ошибок, но мне главное, чтобы элемент добавлялся по вызову этой функции(у меня будет на кнопку)

import { useState, React } from 'react';
import { Link, BrowserRouter as Router } from 'react-router-dom';

const store = {

  state:{
    tasks: [
      {id: 1, value: "" },
      {id: 2, value: "" },
    ],
    newTaskText: "",
  }
}

const App = () => {

  const [inputValue, setInputValue] = useState("");
  const [tasks, setTasks] = useState([]);

  let changeInput = (e) => {
    setInputValue(e.target.value);
  }
  
  const addTask = () => {
    const newTask = {
      value:  inputValue,
      id: Math.random(),
    };
    
    setTasks([...tasks, newTask]);
    setInputValue("");

    };

  return (
    <Router>
      <div className="container mx-auto px-4 py-10 border-2 rounded border-solid border-black flex flex-col justify-center items-center relative w-2/4">
        <form className="space-x-2 w-3/4">
          <input type="text" placeholder="Add Task" value={inputValue} onChange={changeInput} className=" bg-gray-300 h-8 w-3/4 rounded border-solid border-black"/>
            <Link to="/">
              <button onClick={addTask} className='bg-gray-700 text-white px-3 h-8 w-16 rounded border-solid border-black'>Add</button>
            </Link>
        </form>
        <List tasks={store.state.tasks}/>
      </div>
    </Router>
  );
}

Файл List

import React from 'react';
import Task from './Task/Task';

const List = (props) => {
    return (
        <div className=' h-full block w-3/4 border-2 my-4 rounded border-dotted border-gray-400 bg-gray-100'>
            <Task tasks = {props.state.tasks}/>
        </div>
    )
}

export default List

Файл Task

import React from 'react';

const Task = (props) => {
    const tasks = props.tasks
    return (
        <>
            {tasks.map(({id, value}) => (
            <label key={id} className="inline-flex items-center mt-3 pl-2 space-x-2 w-full">
                <input value={value} type="text" title="Add Task" className="h-8 w-3/4 border-2 rounded-md bg-gray-300 border-black" />
                <input type="checkbox" className="form-checkbox h-5 w-5 text-blue-600" unchecked />
                <span className="ml-2 text-gray-700">Done</span>
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </button>
            </label>
            ))}
        </>
    )
}



export default Task

Answer 1

Создаём state для input, и state для массива задач. Далее при нажатии кнопки новая задача добавляется в массив и позже отрисовывается Реактом. Получилось примерно так:

import { useState, React } from "react";

const App = () => {
  const [inputValue, setInputValue] = useState("");
  const [tasks, setTasks] = useState([]);

  let changeInput = (e) => {
    setInputValue(e.target.value);
  };

  const addTask = () => {
    const newTask = {
      value: inputValue,
      id: Math.random(),
    };

    setTasks([...tasks, newTask]);
    setInputValue("");
  };

  return (
    <div className="container mx-auto px-4 py-10 border-2 rounded border-solid border-black flex flex-col justify-center items-center relative w-2/4">
      <input
        type="text"
        placeholder="Add Task"
        value={inputValue}
        onChange={changeInput}
        className=" bg-gray-300 h-8 w-3/4 rounded border-solid border-black"
      />
      <button
        onClick={addTask}
        className="bg-gray-700 text-white px-3 h-8 w-16 rounded border-solid border-black"
      >
        Add
      </button>
      <List tasks={tasks} />
    </div>
  );
};

const List = (props) => {
  return (
    <div className=" h-full block w-3/4 border-2 my-4 rounded border-dotted border-gray-400 bg-gray-100">
      <Task tasks={props.tasks} />
    </div>
  );
};

const Task = (props) => {
  const tasks = props.tasks;
  return (
    <>
      {tasks.map(({ id, value }) => (
        <label
          key={id}
          className="inline-flex items-center mt-3 pl-2 space-x-2 w-full"
        >
          <input
            value={value}
            type="text"
            title="Add Task"
            className="h-8 w-3/4 border-2 rounded-md bg-gray-300 border-black"
          />
          <input
            type="checkbox"
            className="form-checkbox h-5 w-5 text-blue-600"
            unchecked
          />
          <span className="ml-2 text-gray-700">Done</span>
          <button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-7 w-7 text-red-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </button>
        </label>
      ))}
    </>
  );
};

export default App;

БЛОГ НА HUSL

Нужно создать функцию, которая будет добавлять в state элемент, ниже я пытался реализовать это в функции AddTask

Ответы (1 шт):