Why is my number coming up as an object when passed in the prop?-CodePudding

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?

CodePudding user response：

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;

CodePudding user response：

Your arguments to the FooterScroll are wrong. Try this:

  const FooterScroll = ({ Id }: { Id: number }) => {
  ...
  }

It should work.