Блог

Это js-файл моего родительского компонента…

 import React, { useContext, useState } from "react";
import TaskListContextProvider from "./TaskListContext";
import TaskList from "./TaskList";
import TaskForm from "./TaskForm";

const AddMenu = () => {
  const [menu, setMenu] = useState({
    menuName: "",
    tag: "",
    price: "",
    menuItem: ""
  });


  const addMenu = (e) => {
    const { name, value } = e.target;
    setMenu((preValue) => {
      return {
        ...preValue,
        [name]: value,
      };
    });
    
  };

   //function to recieve data from child component
    const addList=(data)=> {
    setMenu([...data,{menuItem:data}]);
   };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(menu);
  };

  return (
        <div className="form-row">
          <div className="form-group">
            <input
              type="text"
              name="menuName"
              onChange={addMenu}
              value={menu.menuName}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              name="tag"
              onChange={addMenu}
              value={menu.tag}
            />
          </div>
          <div className="form-group">
            <div className="main">
              <TaskListContextProvider addList={addList}>
                <TaskForm />
                <TaskList />
              </TaskListContextProvider>
            </div>
          </div>
          <div>
            <input
              type="number"
              name="price"
              onChange={addMenu}
              value={menu.price}
            />
          </div>
        </div>
        <button
          type="submit"
          onClick={onSubmit}
        >
          Save
        </button>
  );
};

export default AddMenu;

  

Это js-файл моего дочернего компонента…

 import uuid from 'uuid'

export const TaskListContext = createContext()

const TaskListContextProvider = props => {
  const initialState = JSON.parse(localStorage.getItem('tasks')) || []
  
  const [editItem, setEditItem] = useState(null)
  const [tasks, setTasks] = useState(initialState)
  
// call-back function...
//   const sendData=()=>{
//     props.addList(tasks);
//   }
//   sendData();

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
    console.log(tasks);
    props.addList(tasks);
  }, [tasks])

    
  // Add tasks
  const addTask = title => {
    setTasks([...tasks, { title, id: uuid() }]) 
  }
  
  // Remove tasks
  const removeTask = id => {
    setTasks(tasks.filter(task => task.id !== id))
  }
  
  // Clear tasks
  const clearList = () => {
    setTasks([])
  }
  
  // Find task
  const findItem = id => {
    const item = tasks.find(task => task.id === id)
    setEditItem(item)
  }

  // Edit task
  const editTask = (title, id) => {
    const newTasks = tasks.map(task => (task.id === id ? { title, id } : task))
    
    console.log(newTasks)

    setTasks(newTasks)
    setEditItem(null)
  }

  return (
    <TaskListContext.Provider
      value={{
        tasks,
        addTask,
        removeTask,
        clearList,
        findItem,
        editTask,
        editItem
      }}
    >
      {props.children}
    </TaskListContext.Provider>
  )
}

export default TaskListContextProvider 

  

Мой вопрос: как отправить дочернему компоненту переменные данные «задачи», которые содержат массив объектов, в родительский компонент и сохранить их в объект «MenuItem», поэтому всякий раз, когда я нажимаю на кнопку сохранения, он должен отображать меню на консоли??

вы можете это сделать…

   useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks))
    props.addList(tasks);
  }, [tasks])
  

здесь сразу после установки задач в локальное хранилище вы можете отправить данные родительскому компоненту.