How to pass in props in react directly as constants?

Issue

How to write the type inside props which are being passed directly as constants e.g. const ComponentName = ({tasks: TaskType[]}) => {return (<>{tasks[0]}</>)}?

My TaskType is stored as an interface in another file. I don’t want to use Props and write the name of each prop directly but typescript is giving me lots of error.

the files can be found here https://codesandbox.io/s/great-pare-m8ei2?file=/src/App.tsx

Solution

The correct way to type functional components is using the React.FC type from react. SOmething like this:

const AddTaskForm: React.FC<{tasks: TaskType[], setTasks: React.Dispatch<React.SetStateAction<TaskType[]>>}> = ( {tasks, setTasks} ) => {
...
}

export default AddTaskForm;

Answered By – Asen Mitrev

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published