React props

passing data from a parent to a child component

notes2021-11-28 16:54

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 :

1/* jonotype/src/App.js */
2
3import { Component } from './Component.js'
4
5export default function App() {
6  return (
7    <div>
8      <h1>Hello!</h1>
9      <h2>Let's begin our React App!</h2>
10      <Component someData="hello component" />
11    </div>
12  )
13}

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

1/* jonotype/src/Component.js */
2
3export function Component(props) {
4  return (
5    <div>
6      <h3>{props.someData}</h3>
7      <p>A child component!</p>      
8    </div>
9  )
10}

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):

1/* jonotype/src/Component.js */
2
3export function Component({someData}) {
4  return (
5    <div>
6      <h3>{someData}</h3>
7      <p>A child component!</p>      
8    </div>
9  )
10}

Notice that:

  • the {someData} parameter now has curly braces
  • the keyword props has become redundant via JavaScript destructuring

Moving this over to App.js:

1/* jonotype/src/App.js */
2
3import { Component } from './Component.js'
4import { ComponentAlternate } from './ComponentAlternate.js'
5
6export default function App() {
7  return (
8    <div>
9      <h1>Hello!</h1>
10      <h2>Let's begin our React App!</h2>
11      <Component someData="hello component" />
12      <ComponentAlternate someData="alternate component" />
13    </div>
14  )
15}

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):

1/* jonotype/src/ComponentAlternate.js */
2
3export function ComponentAlternate({someData, otherData}) {
4  return (
5    <div>
6      <h3>{someData} #{otherData}</h3>
7      <p>A child component!</p>      
8    </div>
9  )
10}

Then, in the App.js file:

1import { Component } from './Component.js'
2import { ComponentAlternate } from './ComponentAlternate.js'
3
4export default function App() {
5  return ( 
6    <div>
7      <h1>Hello!</h1>
8      <h2>Let's begin our React App!</h2>
9      <Component someData="hello component" />
10      <ComponentAlternate 
11          someData="alternate component" 
12          otherData={100} 
13      />
14    </div>
15  )
16}

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

nooks :react