Use Props objects to clean up your React code

Use Props objects to clean up your React code

Sending props as props objects make your code easier to work with

The standard way of sending props

This is the way we learn to send props:

// App.js

return (

  <Article login={true} id={7} user={userobject} readBefore={false} setRead={setRead} setFavorites={setFavorites}  />
  )

The problem

But there is a problem with this code (or two, if you add in the weird props names). This code becomes ugly pretty quick. Imagine if we had 5 components with 6 props each. Like this:

// App.js

return (

<Article login={true} id={7} user={userobject} readBefore={false} setRead={setRead} setFavorites={setFavorites}  />
<Article login={true} id={7} user={userobject} readBefore={false} setRead={setRead} setFavorites={setFavorites}  />
<Article login={true} id={7} user={userobject} readBefore={false} setRead={setRead} setFavorites={setFavorites}  />
<Article login={true} id={7} user={userobject} readBefore={false} setRead={setRead} setFavorites={setFavorites}  />
<Article login={true} id={7} user={userobject} readBefore={false} setRead={setRead} setFavorites={setFavorites}  />
)

This does not look good.

Sending props with props objects

But luckily, their is a more clean way to code this. We can use props objects.

// App.js

const articleProps = {
  login: true,
  id: 7,
  user: userobject,
  readBefore: false,
  setRead: setRead, 
  setFavorites: setFavorites
}

return (
  <Article {…articleProps} />
)

First, we create a new variable. Then we put in all the props we want to send to a component. Lastly, we simply use the spread operator to spread all the properties. That’s it.

Why use props objects?

There are two reasons we use props objects:

  • The main reason is because you can separate the UI from the logic. I would rather have more code in the “JavaScript” part of a component, then in the “jsx” part.

  • Another reason, although not so often, is when you have several components that needs the same props. Then if you make one props object, you can use the same object on different components!

Multiple components using the same props

Look at this example:

// App.js

const userProps = {
  jwt: jwt,
  id: id,
  name: name,
  login: true,
}

return (
  <Sidebar {…userProps} />
  <Account {…userProps} />
  <Footer {…userProps} />
)

This will drastically increase your code readability. Even if the component only need 4 of the 5 props, this is still an option to consider.

When NOT to use props objects

As a general rule, I use props objects when a component needs 3 or more props. Check this example:

// App.js

const navbarProps = {
  login: true,
}

return (
  <Navbar {...navbarProps} />
(

This is not worth it for me. If I have 1 or 2 props, it's just an overkill to use props objects.

What do you think of props objects? What's the rule for when you use them?

Did you find this article valuable?

Support Dave Kjell Marong by becoming a sponsor. Any amount is appreciated!