type not matching typescript react

Question

I am trying to send this props to a child component from parent:

{
    "days": 7,
    "hours": 20,
    "minutes": 51,
    "seconds": 7
}

the parent component calling the child looks like this:

const FunctionSolvingTime=()=>{
//returns always object as above
return 
{
    "days": 7,
    "hours": 20,
    "minutes": 51,
    "seconds": 7
}
}

const ParentComponent=()=>{
const [timeLeft, setTime]=useState(FunctionSolvingTime())



//some logic here

return(
<childComponent timeLeft={timeLeft}/>
)

the child component consuming the time object is:


type TTimeLeft = {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
};


const childComponent = (timeLeft: TTimeLeft) => {

//consume the data here
//{timeLeft.days},{timeLeft.hours}...
}

the error I am getting looks like


Type '{ timeLeft: { days: number; hours: number; minutes: number; seconds: number; }; }' is not assignable to type 'IntrinsicAttributes & TTimeLeft'.
  Property 'timeLeft' does not exist on type 'IntrinsicAttributes & TTimeLeft'.

any idea what am I doing wrongly here?

thanks

Try specify type React.FC<TTimeLeft> on childComponent. Plus, component props are passed as an object. So the function header would be like const childComponent: React.FC<TTimeLeft> = ({ timeLeft }) => ... — Lee Jeonghyun
– Lee Jeonghyun, Commented Apr 21, 2022 at 14:30

dhaker · Accepted Answer · 2022-04-21 14:50:31Z

2

Props are passed as object

const childComponent = ({ timeLeft }: { timeLeft: TTimeLeft }) => {

//consume the data here
//{timeLeft.days},{timeLeft.hours}...
}

answered Apr 21, 2022 at 14:50

dhaker

1,88519 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

type not matching typescript react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related