I have a component FooterScroll. And the main page is TvIndex.
This is the FooterScroll Component
const FooterScroll = (Id: number) => {
const { event } = useEvent(Id);
console.log('Id', Id);
return (
<Marquee speed={85}>
<Grid container>
{event?.notices.map((notice: EventNotice) => {
if (notice.approved) {
return (
<>
<Grid item px={4} key={notice.id}>
<CampaignIcon />
</Grid>
<Grid item alignItems="center">
{notice.body}
</Grid>
</>
);
}
})}
</Grid>
</Marquee>
);
};
export default FooterScroll;
This is the TvIndex Page
import FooterScroll from 'components/pages/members/tv/scrolling-footer';
const TvIndex: React.FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.scrollFooter}>
<FooterScroll Id={39324} />
</div>
</div>
);
};
export default TvIndex;
For some reasons that I don't understand, when I pass in this any id number as a prop in my main component for FooterScroll, it gives me this error: Type '{Id: number;}' is not assignable to type 'number'.
Then I decided to console log it inside FooterScroll, and it looks like after the id gets passed in TvIndex, it passes inside the FooterScroll component as an Object, like so: Id > Object { Id: 39324 }.
How can I solve this?
The argument passed to a React component is an object, whose properties are the props passed down by the caller. For example
<FooterScroll Id={39324} />
results in a prop object of:
{
Id: 39324
}
React doing it this way allows for easily adding additional props, or properties to the props object, without changing the function signature much:
<FooterScroll Id={39324} someOtherProp="foo" />
results in a prop object of:
{
Id: 39324,
someOtherProp: 'foo'
}
So, you need to change the function definition to
const FooterScroll = ({ Id }: { Id: number }) => {
or do
const FooterScroll = (props: { Id: number }) => {
const { Id } = props;
Your arguments to the FooterScroll are wrong. Try this:
const FooterScroll = ({ Id }: { Id: number }) => {
...
}
It should work.