React04 – Props

How can I send parameters to React components?: Props

A name will be passed to the HelloWorld component:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

function App() {
 

  return (
    <>
      <h1>App component</h1>
      <HelloWorld name="Smith"/>

    </>
  )
}

export default App

In order for the HelloWorld application to receive the passed value, the following changes will need to be made:

function HelloWorld(props){

    return(<>
        <h2>Hello {props.name}</h2>
    </>)

}

export default HelloWorld;

Your browser window will look like this:

You are going to pass an object as parameter.

First define the constant that will contain the values. Finally, this constant is passed through a parameter called info.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

const car ={
  color: "blue",
  wheels:4,
  engine: "diesel"

}

function App() {
  return (
    <>
      <h1>App component</h1>
      <HelloWorld info={car}/>

    </>
  )
}

export default App

The receiver of the object will access its values as follows:

function HelloWorld(props){

    return(<>
        <h2> Your car:
            <ul>
                <li key="0">Color: {props.info.color}</li>
                <li key="1">Wheels:{props.info.wheels}</li>
                <li key="2">Engine: {props.info.engine}</li>
            </ul>
        </h2>
    </>)

}

export default HelloWorld;

The result will be as follows:

Destructuring Props

Sometimes we are only interested in a few properties from all the ones sent to us.

App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

const car ={
  color: "blue",
  wheels:4,
  engine: "diesel"
};

function App() {
  return (
    <>
      <h1>App component</h1>
      <HelloWorld color={car.color} wheels={car.wheels} engine={car.engine}/>

    </>
  )
}

export default App;

HelloWorld.jsx

function HelloWorld({color, engine}){

    
    return(<>
        <h2>Your car has {color} color and {engine} engine</h2>
        
    </>);

}

export default HelloWorld;

Props.children

Another project is created

App.jsx

import './App.css'
import Parents from './components/Parents'


function App() {
 return (
   <>
     <h1>App</h1>
     <Parents/>
    </>
 )
}


export default App

Parents.jsx

import Daughter from "./Daughter";
import Son from "./Son"


const Parents = ()=>{
   return(
       <>
           <Son>
               <h1> I am your son</h1>
           </Son>


           <Daughter>
               <h1> I am your daughter</h1>
           </Daughter>
       </>
   );
}


export default Parents;

Son.jsx

const Son  = (props)=>{
   return(
       <>
         {props.children}
       </>
   );
}


export default Son;

Daughter.jsx

const Daughter = (props)=>{
   return(
       <>
         {props.children}
       </>
   );
}


export default Daughter;