react-props.md

react-props.md

Props in React

Ira Herman - General Assembly - Santa Monica, CA

Learning Objectives

Students Will Be Able To:
Understand the value of props within a React Application
Pass props via JSX
Use this.props to retrieve data passed from a parent component

Road Map

1. What are Props?
2. Passing Props - codealong
3. Your turn
4. Essential Questions

What are Props?

A parent component uses props to pass data and references to methods/objects to child components.

A prop looks much like an attribute=value pair in an HTML element.

Accessing Passed Props

When a Function Component is being rendered, React will pass in props as the first argument to the function like this:

const ColorPicker = (props) => (
  ...

However, a Class Component will access props via a property on the instance (this) like this:

{this.props.myProp}

Props Cannot be Changed

Props are immutable, their values are never to be changed.

Remember, the prop came from a component somewhere up the hierarchy and if the prop's value originated from state, it would be that component's responsibility to update its own state.

However, a component can certainly pass down via props methods that can be used to update its state - but that's for another day.

Setting Up a React Playground

Let's use CodeSandbox to experiment further with JSX.

Be sure to create a new React sandbox, then:

1. We need an HTML element to append our React component to. This has already been provided within the public/index.html as follows:

   <div id="root"></div>

2. In a future lesson we'll learn a lot about styling in React - and you'll see that like most things React - it's different. CodeSandbox has already created a CSS stylesheet within the src folder. Thanks to tooling, it is able to be "imported" within the index.js like this:

   import React from "react";
   import ReactDOM from "react-dom";
   // Bring in the styling!
   import './styles.css';

   Now, let's replace the existing CSS inside of styles.css with the following:

   html, body {
     height: 100%;
     font: 1rem sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
   }

3. Let's cleanup the <App> component in index.js as follows:

   function App() {
     return (
       <div>
         
       </div>
     );
   }

4. Okay, let's create our own <Greeter> component by creating a src/Greeter.js (note that the naming convention is UpperCamelCase) and defining the component as a Function Component and exporting like this:

   import React from 'react';
   	
   function Greeter(props) {
     return (
       <div>
         <h1>Greetings Earthling {props.earthling}</h1>
       </div>
     );
   }
   
   export default Greeter;

   Note how a Function Component (a component defined as a function) accepts "props" as an argument and must return its UI (defined using JSX).

5. Now let's modify <App> to render the new <Greeter> component instead of the built-in <h1> React element:

   function App() {
     return (
       <div>
         <Greeter />
       </div>
     );
   }

   We'll get an error because there's no Greeter defined - let's import it...

6. Add the following import below the others:

   import React from "react";
   import ReactDOM from "react-dom";
   // Import the default export of the Greeter.js module
   import Greeter from "./Greeter";

You should now be seeing the text "Greeting Earthling" in the output:

Including props in JSX

We will soon have a lesson dedicated to learning about props and state in React, but let's cover a few basics regarding props.

The syntax of passing props to a component is much like defining attributes in an HTML element.

Many pre-defined props map to HTML attributes. These docs list the supported HTML attributes and discuss important differences. For example, we cannot use class to assign CSS classes to a built-in HTML component, instead we must use className because class is a reserved word in JavaScript.

Many props map directly to their HTML attribute counterparts. For example, this is how you could add an id to a <div>:

<div id='todos-container'>

Of course, it would make sense to add attributes such as id to React Elements only, because they are the only components that end up generating actual DOM elements in the page.

Some props map to HTML attributes but have a slightly differently implementation, for example, the style prop is used to style a component inline, however, it must be passed an object consisting of CSS property/values, not a string like its HTML counterpart.

However, most of the props we use will be custom props that are unique to the application.

Let's pass a prop named earthlingto the <Greeter /> component:

function App() {
  return (
    <div>
      <Greeter earthling='Wilma'/>
    </div>
  );
}

When we logged out the component object returned by React.createElement, there was a props property that was set to an empty object. This object holds the props that we pass to a component.

Exercise - Passing Props (5 mins)

Your turn to pass some props:

1. Using codesandbox, create a fork of my earthlings react app
2. Change the earthling prop to your name
3. Change the wants passed in

Click the 🌶️ in Slack when finished.

Essential Questions

• We use _______ to pass information as key/value pairs to a component.
• Where in the code do we pass props to a component?

References

Components and Props - React Docs