React Props Explained

All properties that are passed into a component are passed in as a single object.

Remember that the following three examples are equivalent:

export default function Joke({ rating = 0, joke }) {

export default function Joke(props) {
  let { rating = 0, joke } = props

export default function Joke(props) {
  let rating = props.rating || 0
  let joke = props.joke

export default function Joke({ rating = 0, joke }) {
   
  let stars = ""
  for (let i = 0; i < 5; i++) {
    if (i < rating) {
      stars += "⭐"
    } else {
      stars += "☆"
    }
  }

  return (
    <div>
      <p>{joke}</p>
      <p>{stars}</p>
    </div>
  )
}

App.jsx

import './App.css'
import Joke from './Joke'

function App() {
  
  return (
    <div className="">
      <h1>Dad Jokes</h1>

      <Joke joke={"I used to be a banker, but then I lost interest!"} rating={3} />

    </div>
  )
}

export default App