React props

Intro to props

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 :

/* jonotype/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:

/* jonotype/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):

/* jonotype/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

/* jonotype/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):

/* jonotype/src/ComponentAlternate.js */

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

Then, in the App.js file:

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" 
          otherData={100} 
      />
    </div>
  )
}

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

The output will look like this:

Code repo

available on https://github.com/joncoded/jonotype/tree/001-props