What is props in ReactJS

In ReactJS props stands for properties. They are immutable: their value can not be changed or modified from inside of the component. They are the read-only components. In React, data can be passed down from parent to child as attributes. And those data can be read as props from the child. Any kind of data can be passed down to the child and the child component receives those data via props.

<Parent topic={Everything about props} language={JavaScript} />

In this article, we will be covering below topics,

  • Passing data to another component
  • Receive data with props
  • Advantages of using props

Passing data to another component via props

  • Create some data; JavaScript variables in App.js function. The data can be an array, it can be an object even it can be a function as well.
//src/App.js

import logo from './logo.svg';
import './App.css';

function App() {
  // declaring variables
  const heading = "React 'props' ";
  const subHeading = "It is now easier to pass and receive data to and from the component"
  return (
    <div className="App">

    </div>
  );
}

export default App;
  • Create a component folder inside src folder of the React App. And then create a functional component there.

  • Export the function from this “functional component”.
export default {name of the component here}
// src/components/Child.js

import React from 'react';

const Child = () => {
    return (
        <div>

        </div>
    );
};

export default Child;
  • Import this newly created component in App.js 
// import Child.js component from components folder
import Child from './components/Child';
//src/App.js

import logo from './logo.svg';
import './App.css';
// import Child.js from components folder
import Child from './components/Child';



function App() {
  // declaring variables
  const heading = "React 'props' ";
  const subHeading = "It is now easier to pass and receive data to and from the component"
  return (
    <div className="App">
      
    </div>
  );
}

export default App;
  • Write the component just like an HTML code inside JSX (<div>...</div>).
return (
    <div className="App">
      <Child />
    </div>
  );

or

 return (
    <div className="App">
      <Child></Child>
    </div>
  );
  • Pass data to the component. The data being passed will have a name and value.
 // const heading = "React 'props' ";
 // const subHeading = "It is now easier to pass and receive data to and from the component"
<Child pageHeading={heading} pageSubHeading={subHeading}/>
//src/App.js

import logo from './logo.svg';
import './App.css';
// import Child.js from components folder
import Child from './components/Child';



function App() {
  // declaring variables
  const heading = "React 'props' ";
  const subHeading = "It is now easier to pass and receive data to and from the component"
  return (
    <div className="App">
      {/* passing the data */}
      <Child pageHeading={heading} pageSubHeading={subHeading} />
    </div>
  );
}

export default App;

Receive data with props

  • Open the component where the data is being passed from the parent
// src/components/Child.js

import React from 'react';
// the data is being passed to this component from its parent
const Child = () => {
    return (
        <div>

        </div>
    );
};

export default Child;
  • Pass the props as an argument to the child component
// pass props as an argument
const Child = (props) => {
    return (
        <div>

        </div>
    );
};
  • Declare props variables. Because the data is being passed inside the props. And props is an object here. So, we have access to those data just like an object.
// access pageHeading from props
const heading = props.pageHeading;
// access subHeading from props
const subHeading = props.pageSubHeading;
  • Pass the variables in JSX
return (
        <div>
            <h1>{ heading}</h1>
            <h2>{subHeading}</h2>
        </div>
    );
// src/components/Child.js

import React from 'react';

const Child = (props) => {
    // access pageHeading from props
    const heading = props.pageSubHeading;
    // access subHeading from props
    const subHeading = props.subHeading;
    return (
        <div>
            <h1>{heading}</h1>
            <h2>{subHeading}</h2>
        </div>
    );
};

export default Child;

After following these procedure, run the ReactJS application server with npm start from command prompt or Visual Studio Code terminal.

The preview should be something like this:

 

Advantages of using props in ReactJS

  • Can pass data from parent to child, know as prop drilling.
  • Any types of data can be passed as props (e.g. object, array, function, string, boolean, number etc. )
  • Easy to receive data in child component (just like an object; props in fact is an object)
  • After receiving the data from props, data can be used anywhere within the very component. Even it can be pass down to a child component as well.

This article contains all the basic informations that you need to know to work with props and data in ReactJS. With the help of props data can be passed down dynamically all over the component.