Question 118789 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I delete a parent app.js item from a child component?

By clicking the delete button I’m expecting to filter a parent app.js component array and delete a particular item. But I’m getting a Typescript error Cannot assign to read only property ‘message’ of object ‘SyntaxError: /src/components/TaskComponent.tsx: Identifier ‘deleteTask’ has already been declared., for I’m typing a handle delete as a prop. Also do I need to filter the main Tasks array twice, in the child and in the parent component ?

https://codesandbox.io/s/test-login-page-tasks-typescript-24-04-eg91s5?file=/src/components/TaskComponent.tsx

// Child component

    import React, { useState, FC } from "react";

    type Tasks = {
      title: string;
      author: string;
      description: string;
      status: number | any;
      priority: number | any;
    };

    type Props = {
      Tasks: Tasks[];
      changeTask: (tasks: Tasks) => {};
      deleteTask: (id: Tasks) => {};
    };
    const TaskComponent: FC<Props> = ({ Tasks, changeTask, deleteTask }) => {
      
      const deleteTask = (id) => {
        Tasks.filter(task => task.id === id)
      };
      
      return (
      ...
      <input type="button" value="delete" onClick={deleteTask} />
      )
    }

    // App.js component

    const Tasks = [
      {
        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"
      },...
      }
    function App() {
      const [tasks, setTasks] = useState(Tasks);
      
    const deleteTask = (id) => {
        setTasks((tasks) => tasks.filter((task) => task.id === id));
      };

return (
   <TaskComponent
              Tasks={tasks}
              changeTask={changeTask}
              deleteTaskP={deleteTask}
            />
Tags:

2

Answers


  1. 0

    In the TaskComponent you pass deleteTask as a prop and then you declare variable with the same name inside of the TaskComponent. You cannot do that, just use different name if you need to preserve both.

    You’re destructuring your props, so basically ({deleteTask}) means const deleteTask = ... inside of the TaskComponent

    Login or Signup to reply.
  2. 0

    A starting issue would be that inside App.tsx you are passing a prop named deleteTaskP – a typo or was it your intention instead of deleteTask – which is what you seem to be expecting as prop in your Child component TaskComponent and instead would have a value of undefined (destructuring non-existant property), so modify App.tsx:

    function App() {
// ...
return (
 <TaskComponent
     Tasks={tasks}
     changeTask={changeTask}
     // deleteTaskP={deleteTask}
     deleteTask={deleteTask}
 />
}

    And then inside TaskComponent you are already expecting a prop named deleteTask and both trying to create a deleteTask of the similar functionality, so don’t clash the names, but if you do need a new function then use a different name, remove that from TaskComponent.tsx:

    const TaskComponent: FC<Props> = ({ Tasks, changeTask, deleteTask }) => {

 // Remove (or rename) this function and instead use 'deleteTask' prop
 // const deleteTask = (id) => {
 //  Tasks.filter(task => task.id === id)
 // };

return (...);
}

    Additionally in your CodeSandbox I noticed your type Tasks has a wrong property name author instead of author_name inside the same TaskComponent.tsx:

    type Tasks = {
  id: string;
  title: string;
  // author: string; // make sure to rename into:
  author_name: string;
  description: string;
  status: number | any;
  priority: number | any;
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search