Everything to Know About React Props

What are React props?

Props in React are "properties" that allow components to pass data to another component. It is important to know that props can only pass information from a parent to a child component.

Here is a basic example of how props work, we have two components App.js and FoodList.js. App.js passes the prop food, which is different kinds of food, to each FoodList component.

import FoodList from './FoodList';

function App() { 
  return (
    <div className="App">
      <FoodList food="Pizza"/>
      <FoodList food="Ramen"/>
      <FoodList food="Chicken"/>
    </div>
  );
}

function FoodList(props) {
  return <h1>I like: {props.food}</h1>;
}

output:
   <div>I like: Pizza </div>
    <div>I like: Ramen </div>
   <div>I like: Chicken </div>

The output we get is three h1s with the different food kinds returned in each component.

What Values Can You Use?

1. String literals:
   <FoodComponent prop="Ghost Pepper" />

2. Template literals with variables:
   <FoodComponent prop={`My Favorite color is: ${color}`} />

3. Number literals:
   <FoodComponent prop={37} />

4. Boolean literals:
   <FoodComponent prop={true} />

5. Plain object literals:
   <FoodComponent prop={{ cost: '$12' }} />

6. Array literals:
   <FoodComponent prop={['wings', 'greenbeans', 'pasta']} />

7. JSX:
   <FoodComponent prop={<Items food="pizza" />} />

8. Variables having any kind of value:
   <FoodComponent prop={color} />

Destructuring props:

Destructuring props inside your component makes your code easier to read, take our earlier example:

// Previous example 
function FoodList(props) {
  return <h1>I like: {props.food}</h1>;
}
// Take the prop name rather than using parathesis like this:
function FoodList({food}) {
  return <h1>I like: {food}</h1>;
}

Spread Syntax

For cases where you need to pass an object to another component as props, use the spread syntax, for example:

// You can pass multiple props like this:
function App() {
  return <FoodList entree="Steak" dessert="ice cream" />;
}
// Or set them to a variable and use the spread syntax.
function App2() {
  const food = { entree="Steak" dessert="ice cream"};
  return <FoodList {...food} />;
}

Then in FoodList.js destructor the spread out data, then access the props from the object like:

function FoodList({...food}) {
    return (
        <div>
            <h1>I will have the {food.entree} and {food.dessert} please.</h1>
        </div>
    )
}

Special Props

1. Key

const songsArray = ['Best-Friend', 'What's-Poppin', 'Industry-Baby' ]

songsArray.map((item, index) => {
return (
<div>
<div className="song" key={index}>{item}</div>
</div>
)
})

When you map an array in JSX, you should always add a key prop on the parent element. React can update the array faster with this value.

2. Children

Another special prop in React are props.children. You can use props.children in React to access the code inside the open and closing tags when you create an instance of a component. Here is an example from Jason Arnold

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Conclusion

Props are a core concept of React, that you need to master to fully grasp the power of the library. Use this guide as a cheat sheet, as it holds all information you need about props. I post blogs every week, mostly about React, so if you find this content useful, please like and share!

Connect with me at: Twitter Github