Skip To Main Content

React: Passing props

Interesting thing I learned from the Scrimba course today.

If you want to pass number-type props into a React component then you can surround them with braces to escape into JS from the JSX:

<Card 
  img="katie-zaferes.png"
  rating="5.0"
  reviewCount={6}
  country="USA"
  title="Life Lessons with Katie Zaferes"
  price={136}
/>

I was actually curious about whether or not this was possible while I was doing the exercise.

I also note, if I haven’t done so already, that destructuring is a good way to get at props within the component…

export default function Card(props) {
    const { image, rating, reviewCount, country, title, price } = props;
    return (
      // JSX here can use, for example, image, instead of props.image
    )
}
categories:Uncategorized
tags:React