Cannot pass a State props on a component using Typescript

Question

It's my first question here so I'm sorry if I make some mistake. I try to learn Typescript by myself after a short time in a school to learn how to use React. So I'm a baby girl dev here !

So here is my problem : I have to pass a state on a component witch is an object. I'm a little confuse because I use React Hook and I'm not use to POO.

So here is my App.tsx

 const App: React.FC = () => { // States Interfaces interface Iinput { input: string; } interface ITask { title: string; done: boolean; } // States // State permettant de stocker texte input const [input, setInput] = useState(""); // State permettant de stocker les tâches const [task, setTask] = React.useState([{ title: "", done: false }]); // Fonction de submit const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (!input) { alert("Veuillez entrer une nouvelle tâche"); } else { let newTask: Array<ITask> = [...task]; let taskObj = {} as ITask; taskObj.title = input; taskObj.done = false; newTask.push(taskObj); setTask(newTask); } }; console.log("toto"); return ( <> <div> <Header /> </div> <div className="main-container"> <div className="task-container"> <h2>TO DO</h2> <div> <Task task={task} setTask={setTask}/>; </div> // And there is my Task component import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export interface ITask { task:object; setTask:React.Dispatch<React.SetStateAction<object>> } interface Props { task:ITask; setTask:ITask // handleSubmit?: ((e: React.FormEvent<HTMLFormElement>) => void); } const Task: React.FC<Props> = () => { return ( <ul className="task-section"> <div className="task-title">toto</div> <button className="trash-button"> <FontAwesomeIcon icon={"trash"} size="2x" color={"#2D7B8D"} className="trash" /> </button> </ul> ); }; export default Task;

Unfortunatly I can find how to pass my state task into my Task component. Here is my error message from Typescript log

Thank you so much for helping !

Answer 1

The main problem is that you have an interface ITask in your Task component file which is different from the interface ITask which exists inside of you main App component.

• Delete that second definition ( the one above interface Props ).
• Move the original definition of ITask outside of the App component body and export it from the file.
• Import that definition into the Task file.

Also you have some confusion between a single task and and array of tasks. The Task component seems to render a single task, but you are passing it the value from your state which is an array. You probably intended to loop through them like

{task.map( (single, i) => (
  <Task task={single} setTask={(task) => { /* do something */ }}/>
))}

In the Props for your Task component, you have said that setTask is an ITask , but it is probably meant to be a function. Rather than something vague like setTask , you might want to pass it specific functions like deleteTask , markComplete , etc.