How to push to an App.js parent component a formed object of the child component with click

Question

I'm trying to push to an App.js parent component a formed object of the child component with click. As I understand first I should complete the newTask object in the child component and then somehow to push this object to the Tasks object in the parent component.

https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/NewTask.js:316-323

// Child component 
const NewTask = ({ authors, tasks }) => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const [description, setDescription] = useState("");
  const [status, setStatus] = useState(false);
  const [priority, setPriority] = useState(false);

  const sendTask = () => {
    let newTask = {
      title: title,
      author: author,
      description: description,
      status: status,
      priority: priority
    };
  };
  
  <input onChange={(e) => setTitle(e.target.value)}/>
  <input onChange={(e) => setDescription(e.target.value)}/>
  <input onChange={(e) => setStatus(e.target.value)}/>
  <input onChange={(e) => setPriority(e.target.value)}/>
  
  <button onClick={sendTask}>Save</button>
  }
  // App parent component
  
  const Tasks = [                            //push newTask to this array
  {
    id: "001",
    status: 0,
    priority: 2,
    title: "Develop website homepage",
    description:
      "Create a visually appealing and responsive homepage for the website",
    schedule: {
      creation_time: "2021-07-23T10:00:00"
    },
    author_name: "John Smith"
  },
  {
    id: "002",
    status: 1,
    priority: 1,
    title: "Implement user authentication",
    description: "Add user authentication feature to the website",
    schedule: {
      creation_time: "2021-07-24T14:30:00"
    },
    author_name: "Sarah Lee"
  }
  ]
  
  function App() {
    return (
      <NewTask authors={Authors} tasks={Tasks} />
    )}

https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs see if this helps — cmgchess, Apr 23 '23 at 09:53

Lin Du · Accepted Answer · 2023-04-23T11:46:29.110

You need to create a state for the App component with the initial Tasks.

App.tsx:

function App() {
  const [tasks, setTasks] = useState(Tasks);
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route path="/" exact={true}>
            <Login authors={Authors} />
          </Route>
          <Route path="/taskslist">
            <Taskslist Tasks={tasks} />
          </Route>
          <Route path="/newtask">
            <NewTask
              authors={Authors}
              onFinish={(newTask) => {
                setTasks((pre) => [
                  ...pre,
                  { ...newTask, id: Math.random().toString() }
                ]);
              }}
            />
          </Route>
          <Route path="/errorlogin">
            <ErrorLogin />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}
export default App;

Expose an onFinish function prop for the NewTask component. You can call it after creating the task. Then call setTasks() setter function to update the tasks state.

NewTask.tsx:

  const sendTask = () => {
    let newTask = {
      title: title,
      author: author,
      description: description,
      status: +status,
      priority: priority
    };
    onFinish(newTask);
    history.replace("/taskslist");
  };

See

How to push to an App.js parent component a formed object of the child component with click

1 Answers1