Reactjs Props Example (2024)

What is Reactjs?

React is a component-based library that breaks down the user interface into smaller, reusable components. In some circumstances, those components will need to communicate (give data to one another), and the best method to do so is to use props.

What is Props in Reactjs?

In React, "props" is a specific term that represents for properties and is used to send data from one component to another.

The main thing to note here is that data with props is passed in a one-way flow, that is from parent to child in one direction.

Moreover, props data is read-only, this means that child components should not change data coming from the parent.

React Props

We can make our components reusable by using parameters and a concept called props in React.

1. We will make custom component for Employee Items - EmployeeItems.js
2. From App.js file, pass the parameters id, name, role to custom component EmployeeItems.

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

function App() {

  return (
    <div><h2>TechGeekNext Props Tutorial</h2>
    <EmployeeItems
    id='1'
    name='TechGeekNext'
    role='Admin'>
    </EmployeeItems>
    </div>
  );
}

export default App;

Custom Components

Here we use the props as a parameter in EmployeeItems.js and utilize the data in the page like props.id, props.name and props.role.

import './style.css'
function EmployeeItems(props){
    return(
        <div>
        <div className='employee-item'>
        <div>{props.id}</div>
        <div>{props.name}</div>
        <div>{props.role}</div>
        </div>
        </div>
    );
}
export default EmployeeItems;

Test the Reactjs Props

npm install

npm start

By default application will open in browser at http://localhost:3000/ url.