React props

In React, we use 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 as arguments corresponding to its parameters
  • one props object will have property-value pairs corresponding to attributes
  • the child component's return function can then use props like a variable

In App.jsx, we would introduce a someData attribute in props:

1/* ourcraft/src/App.jsx */
2
3import { Component } from './Component'
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 Component.jsx we would bring the props in as an argument:

1/* ourcraft/src/Component.jsx */
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.jsx file for clarity's sake):

1/* ourcraft/src/ComponentAlternative.jsx */
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 has curly braces, while props would not
  • here we have engaged in JavaScript object destructuring

Moving this over to App.jsx:

1/* ourcraft/src/App.jsx */
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.jsx file):

1/* ourcraft/src/ComponentAlternate.jsx */
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.jsx 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 would look like this: