CODEWITHSUNDEEP
reactjsreact-hooks
Sergiy Kostenko
Sergiy Kostenko

Reputation: 283

Not able to pass data to child react component

I am pretty new to React, so I am very sorry if my question is dumb, but I'm stuck here. I am trying to send data from parent component to child component

Parent:

export default function Dashboard() {

const [msg, setMSG] = useState<string>("Hello!");

  return (

    <Table message={msg}/>
  );

}

Child:

export default function Orders(message: string) {
  const classes = useStyles();
  return (
    <React.Fragment>
{message}
</React.Fragment>
  );
}

And I am getting an error:

Type '{ message: string; }' is not assignable to type 'string'.

Upvotes: 0

Views: 81

Answers (2)

iamaatoh
iamaatoh

Reputation: 796

You seem to be having a type mismatch issue - which means what's being passed down to your child component is an object

Type '{ message: string; }'

whereas, your child component has specified its input to be a single string by doing this - Orders(message: string)

Try the following, that preserves the type-checking:

 // now `props` is of type object, 
 // with a `key` called `message`, the value of which is of type `string`
 export default function Orders(props: {message: string}) {
  const classes = useStyles();
  return (
    <React.Fragment>
      {props.message}
    </React.Fragment>
  );
}

Upvotes: 1

gabriel_tiso
gabriel_tiso

Reputation: 1127

If you're trying to pass this down as a prop, you have two options, you can destructure the message from the props, or use props.message. I'll show you the destructured way:

 export default function Orders({message: string}) {
  const classes = useStyles();
  return (
    <React.Fragment>
      {message}
    </React.Fragment>
  );
}

Hope this helps

Upvotes: 0

Related Questions