⚛️React props

passing data from parent to child components

To make a parent component "talk" to a child component:

• the parent component will use a special kind of attribute or property known as props

  • this consists of an attribute in a JSX tag

  • the attribute can take on any key name with any value

• the child component function will receive these props in its parameters

  • its return JSX can then use it like a variable

For example, with an App.js we would introduce a someData attribute, or props :

/* reactjon/src/App.js */

import { Component } from './Component.js'

export default function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <h2>Let's begin our React App!</h2>
      <Component someData="hello component" />
    </div>
  )
}

Then, in the Component.js we would bring the props in as a parameter:

/* reactjon/src/Component.js */

export function Component(props) {
  return (
    <div>
      <h3>{props.someData}</h3>
      <p>A child component!</p>      
    </div>
  )
}

To access someData we would simply use props.someData as shown above!

Alternate syntax

We could make things more concise in the component (let's make a separate ComponentAlternate.js file for clarity's sake):

/* reactjon/src/Component.js */

export function Component({someData}) {
  return (
    <div>
      <h3>{someData}</h3>
      <p>A child component!</p>      
    </div>
  )
}

Notice that:

• the {someData} parameter now has curly braces

• the keyword props has become redundant via JavaScript destructuring

Moving this over to App.js

/* reactjon/src/App.js */

import { Component } from './Component.js'
import { ComponentAlternate } from './ComponentAlternate.js'

export default function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <h2>Let's begin our React App!</h2>
      <Component someData="hello component" />
      <ComponentAlternate someData="alternate component" />
    </div>
  )
}

The output for Component and ComponentAlternate will look essentially identical (except for the value passed into the someData prop):

Passing in more than one parameter

We could also pass in another parameter (let's use our ComponentAlternate.js file):

/* reactjon/src/ComponentAlternate.js */

export function ComponentAlternate({someData, someNumber}) {
  return (
    <div>
      <h3>{someData} #{someNumber}</h3>
      <p>A child component!</p>      
    </div>
  )
}

Then, in the App.js file:

/* reactjon/src/App.js */

import { Component } from './Component.js'
import { ComponentAlternate } from './ComponentAlternate.js'

export default function App() {
  const dataSource = {
    someData: "this value",
    someNumber: 10, 
  }
  return ( 
    <div>
      <h1>Hello!</h1>
      <h2>Let's begin our React App!</h2>
      <Component someData="hello component" />
      <ComponentAlternate 
          someData={dataSource.someData}
          someNumber={dataSource.someNumber}
      />
    </div>
  )
}

Note how we simply added an extra JSX attribute/prop called someNumber in the ComponentAlternate tag!

The output will look like this:

Using the spread operator to include all properties of an object

Instead of repetitively listing all properties of an object into a child component like in the previous code block, we could use the spread operator (...variableName):

/* reactjon/src/App.js */

import { Component } from './Component.js'
import { ComponentAlternate } from './ComponentAlternate.js'

export default function App() {
  const dataSource = {
    someData: "this value",
    someNumber: 10, 
  }
  return ( 
    <div>
      <h1>Hello!</h1>
      <h2>Let's begin our React App!</h2>
      <Component someData="hello component" />
      <ComponentAlternate {...dataSource} />
      />
    </div>
  )
}

This becomes very handy when a variable like dataSource has a lot more than just two properties!