How to pass props to a component in React

Everyone who is new to React is confused by these so-called props because they are never mentioned in any other web framework and rarely explained on their own so in the article, we will cover How to pass props to a component in React. They’ll be one of the first things you learn about React after you’ve mastered the JSX syntax. Props are use to convey data from one component to another. In this tutorial, I’ll go through React props in further depth.

What are props?

Consider every programming language’s function. What is the best way to pass values to the function? Using parameters. Parameters are similar to props (properties). In React, they’re used to transport data from one component to another. The following is the most basic example of how to pass props:

const Banner = props => {
  const name = props.name
  return <div>Hello {name}</div>
}

function App() {
  return (
    <div>
      <Banner name="Ranjeet" />
    </div>
  )
}

export default App

There are a few things you should know about props:

  • Props should not be modifies since they are read-only.
  • A child component cannot give props to a parent component. In the component hierarchy, props always travel from top to bottom.

Passing functions as Props

We may also pass functions as props:

const Banner = props => {
  const name = props.name
  return (
    <div>
      <p>Hello {name}</p>
      <button onClick={props.clickHandler}>Click Me</button>
    </div>
  )
}

function App() {
  const showAlert = () => {
    alert("Welcome!")
  }
  return (
    <div>
      <Banner name="Ranjeet" clickHandler={showAlert} />
    </div>
  )
}

export default App

As you can see, the function and prop names do not have to be the same.

Passing Boolean values

If you leave a prop blank, it’ll be interpreted as a Boolean with the value true:

const Banner = props => {
  const name = props.name
  return <div>{props.show && <p>Hello {name}</p>}</div>
}

function App() {
  return (
    <div>
      <Banner name="Ranjeet" show/>
    </div>
  )
}

export default App

If you need to pass false, you must state it directly, such as:

<Banner name="Ranjeet" show={false} />

Passing a state as a prop

You may provide the state of the parent component to the child component as a prop:

import { useState } from "react"

const Banner = props => {
  const name = props.name
  return (
    <div>
      <p>
        {props.greeting} {name}
      </p>
    </div>
  )
}

function App() {
  const [greeting, setGreeting] = useState("Hello")
  return (
    <div>
      <Banner name="Ranjeet" greeting={greeting} />
    </div>
  )
}

export default App

You may also change the parent state by calling a function from the child component, as seen below.

import { useState } from "react"

const Banner = props => {
  const name = props.name
  return (
    <div>
      <p>
        {props.greeting} {name}
      </p>
      <button onClick={props.changeGreeting}>Change greeting</button>
    </div>
  )
}

function App() {
  const [greeting, setGreeting] = useState("Hello")
  const changeGreeting = () => {
    setGreeting("Preet")
  }
  return (
    <div>
      <Banner 
         name="Ranjeet" 
         greeting={greeting} 
         changeGreeting={changeGreeting}
      />
    </div>
  )
}

export default App

The changeGreeting function is passed to the Banner component as a prop, and it is called from the Banner component when the button is pressed. We update the status to ‘Preet’ inside the changeGreeting function.

Passing objects as Props

Consider the following example:

const UserCard = props => {
  const name = props.user.name
  const role = props.user.role
  const age = props.user.age
  const profilePic = props.user.profilePic
  return (
    <div>
      <p>Name: {name}</p>
      <p>Role: {role}</p>
      <p>Age: {age}</p>
      <img src={profilePic} alt={name} />
    </div>
  )
}

function App() {
  const user = {
    name: "Ranjeet",
    role: "WordPress Developer",
    age: 27,
    profilePic: "image.jpg",
  }

  return (
    <div>
      <UserCard user={user} />
    </div>
  )
}

export default App

We’re passing an object to the child component and using props.user.name to retrieve it. So we have to go via props.user every time we need to access a property.

To avoid this, pass them as independent props like shown below:

const UserCard = props => {
  const name = props.user.name
  const role = props.user.role
  const age = props.user.age
  const profilePic = props.user.profilePic
  return (
    <div>
      <p>Name: {name}</p>
      <p>Role: {role}</p>
      <p>Age: {age}</p>
      <img src={profilePic} alt={name} />
    </div>
  )
}

function App() {
  const user = {
    name: "Ranjeet",
    role: "WordPress Developer",
    age: 27,
    profilePic: "image.jpg",
  }

  return (
    <div>
       <UserCard
        name={user.name}
        role={user.role}
        age={user.age}
        profilePic={user.profilePic}
      />
    </div>
  )
}

export default App

We still haven’t figured out how to write user. for gaining access to all props It was just elevate to the parent component.

The Javascript spread operator may be used to simplify this syntax even further.

const UserCard = props => {
  const name = props.user.name
  const role = props.user.role
  const age = props.user.age
  const profilePic = props.user.profilePic
  return (
    <div>
      <p>Name: {name}</p>
      <p>Role: {role}</p>
      <p>Age: {age}</p>
      <img src={profilePic} alt={name} />
    </div>
  )
}

function App() {
  const user = {
    name: "Ranjeet",
    role: "WordPress Developer",
    age: 27,
    profilePic: "image.jpg",
  }

  return (
    <div>
        <UserCard {...user} />
    </div>
  )
}

export default App

The only difference is that instead of passing individual props, we now merely pass {…props} in the UserCard tag.

Destructuring props

If you see the above example, in the child component, we are using props.name, props.age etc for accessing the props. Can we simplify this further? Yes, we can.

const UserCard = ({ name, role, age, profilePic }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Role: {role}</p>
      <p>Age: {age}</p>
      <img src={profilePic} alt={name} />
    </div>
  )
}

function App() {
  const user = {
    name: "Ranjeet",
    role: "WordPress Developer",
    age: 27,
    profilePic: "image.jpg",
  }

  return (
    <div>
        <UserCard {...user} />
    </div>
  )
}

export default App

As you can see, we utilized JavaScript destructing to get direct access to the properties.

These are just alternative methods for passing an object to a child component.
There is no such thing as the most effective method.
You are free to use whatever style you choose.

Default props – Pass Props to a Component

What happens if the parent component forgets to pass a prop? How can we ensure that our code does not fail and that a backup value is always available? For that, we may utilize default props.

Default props can be set in a variety of ways.

Pass Props to a Component Using Short circuit evaluation

To specify a default name, we may use the logical OR operator, as shown below:

const Banner = props => {
  const name = props.name || "user"
  return <div>Hello {name}</div>
}

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

export default App

Pass Props to a Component Using default parameters

We can also specify a default parameter while destructing the props:

const Banner = ({ name = "user" }) => {
  return <div>Hello {name}</div>
}

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

export default App

Pass Props to a Component Using defaultProps

In React, there is another option to define the default props manually. This is the method that is most commonly recommended:

const Banner = ({ name }) => {
  return <div>Hello {name}</div>
}

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

Banner.defaultProps = {
  name: "user",
}
export default App

Prop-types can also be used to check the type of props.

Renaming props

If you want to alter the name of the prop, follow the instructions below:

const UserCard = ({ name, role: occupation }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Occupation: {occupation}</p>
    </div>
  )
}

function App() {
  return (
    <div>
      <UserCard name="Adil" role="Frontend Developer" />
    </div>
  )
}

export default App

We’re passing a prop named role from the parent component to the child component, which we’re renaming to occupation.

Passing components as children

Wrapping a component within the parent component allows us to pass it to another component, as demonstrated below:

const UserCard = ({ name, children }) => {
  return (
    <div>
      <p>Name: {name}</p>
      {children}
    </div>
  )
}

const UserIcon = ({ profilePic }) => {
  return <img src={profilePic} alt="profile" />
}

function App() {
  return (
    <div>
      <UserCard name="Ranjeet">
        <UserIcon profilePic="image.jpg" />
      </UserCard>
    </div>
  )
}

export default App

As you can see, we can use the children’s prop to access the passed component.

Using a named prop, as demonstrated below, is another approach to provide a component to the child:

const UserCard = ({ name, icon }) => {
  return (
    <div>
      <p>Name: {name}</p>
      {icon}
    </div>
  )
}

const UserIcon = ({ profilePic }) => {
  return <img src={profilePic} alt="profile" />
}

function App() {
  return (
    <div>
      <UserCard 
        name="Ranjeet"
        icon={<UserIcon profilePic="image.jpg" />}
      ></UserCard>
    </div>
  )
}

export default App

I hope you enjoyed the post and now have a better knowledge of the many methods for providing props in React. If you have any queries, please leave them in the comments section below or contact us through the website.

Leave a Comment