ReactJS | Passing Props to a Component

Hello ReactJS Friends,

Today I have come up with another topic to help you learn ReactJS. This guide will help you learn about Passing Props to a Component in ReactJS.

What are Props in React?

Props stand for “properties”. Props are just a shorter way of saying properties.

In functions, we use parameters to pass values, the same way Props are used in a React application to send data from one React component to the other. 

React components use props to interact with each other. Props in React are used to pass data from a parent component to a child component/s. Every parent component can pass some information to its child components by giving them props. They are useful when you want your app’s data flow to be dynamic.

Learn more about Props and Components in ReactJS.

Let’s look at the example of passing props in React.

Example of Passing Props to a Component in React:

1. App.js

import React from "react";
import "./App.css";
import ButtonCmp from "./ButtonCmp";
function App(){
    return (
        <div className="App">
            <ButtonCmp title="click me" />
        </div>
    );
}
export default App;

2. ButtonCmp.js

import React from "react";
import "./App.css";
function ButtonCmp({title}){
    return (
        <div className="App">
            <button onClick={sayHello}>{title}</button>
        </div>
    );
}
export default ButtonCmp;

Conclusion:

I hope you got a clear idea about Props in React. If you have any doubts, share them with me through the comment section. Share the tutorial with your friends and keep in touch with us to learn more about ReactJS.

Happy Coding!