How to Pass A Lot of Props in ReactJS

In this article, we are going to see how we can pass a lot of props in ReactJS efficiently. As we know, in react we have to work with props a lot of times, where we have to create our props for some child components. But there come some new difficulties while working with props if we are beginners in react. So today, we will learn to pass props in ReactJS.

Let’s first discuss the problem that comes while passing props to the child component.

Pass A Lot of Props in ReactJS: Problem

Now let’s talk about Mr. noob who created this code, here mr. noob has imported a child component named Comp1. And then he created a constant named data where we added some data. Now he has added these data in the Comp1 component as props. Here you can see he has hard-coded these props in the component, which is not efficient. We have an alternate for that, which we will discuss later on.

import Comp1 from './Comp1';
import './App.css';

function App() {

  const data = {
    name: "Mr. noob",
    profession: "Noob in React",
    age: "let's not talk about that!!"
  }
  return (
    <div className="App">
      <Comp1 name = {data.name}
        profession= {data.profession}
        age= {data.age}
      />
    </div>
  );
}

export default App;

Now, as we can see in the Comp1 component, mr. noob is calling every prop using its name inside the curly braces. Now imagine if he had 8 or 9 props, then he would have to write all of them. Again, it’s a problem. Then he simply used these props inside a line.

As you can see, Mr. noob is actually a big noob because he did so much hard coding, which may lead to a big problem when he needs to add or update these props. No doubt he will get the output, but this is the dumbest way to work with props.

export default function comp1({name, profession, age}){
    return(
        <>
          <strong>Hello! My name is {name}, and i'm {profession}. Well My age is {age}</strong>
          
        </>
        
    );
}

Pass A Lot of Props in ReactJS: Solution

Okay now, let’s modify the above code to an efficient one. First, in App. JSX, we have again imported Comp1(child component). Then we have to modify the data since we are not noob, and then we added {…data} in Comp1 as props. Yes, this is the solution to avoid writing each and every prop individually. (…) is a well-known spread operator which helps us to gain each and every data in child component Comp1.

import Comp1 from './Comp1';
import './App.css';

function App() {

  const data = {
    name: "ReactJSGuru",
    profession: "Pro in React",
    age: "Again, let's not talk about that!!"
  }
  return (
    <div className="App">
      <Comp1 {...data}
      />
    </div>
  );
}

export default App;

Now in the child component, we don’t need to pass every prop name in the curly braces, we can simply write props here. So if you update or add any other prop, then you don’t have to write at least 3 times. Now we have written a line in order to use these props where we have to add props using props. name, props. profession and props. age. You have to mention props. property order to use props.

export default function comp1(props){
    return(
        <>
          <strong>Hello! My name is {props.name}, and i'm {props.profession}. Well My age is {props.age}</strong>
          
        </>
        
    );
}

As you can see, we have seen a very efficient way to props, which is very helpful to know if you are working in an office, or you are a student then this kind of small thing will help you out.

You may also like:

• Can Not Read Properties of Undefined Reading Map in React JS
• How to Make Image Slider In React
• How to Make QR-Code Generator in React