Introduction
In modern times, React is the most popular trending JavaScript library for building a single-page application. All the applications in React are built using components. Using the props, you can send the data from one component to another component. Data is sent in unidirectional flow; it means that data flows from parent to child.
In this article, we will discuss how to pass data between components using React props and best practices for working with them.
Props in React
Props are also referred to as properties. It only performs read operations; you cannot directly modify the child component. With the use of props, we can pass data from the function to the child components, build the component more dynamically, and make it reusable.
Syntax:
const Greeting = ({ name, age }) => (
<h2>Hello, my name is {name} and I am {age} years old.</h2>
);
Example
Code:
import React, { Component } from "react";
class Greeting extends Component {
render() {
return <h2>Hello, {this.props.name}!</h2>;
}
}
class App extends Component {
render() {
return (
<div>
<Greeting name="John" />
<Greeting name="Alice" />
</div>
);
}
}
export default App;
Output:
Hello, John!
Hello, Alice!
How Data flows in React?
React uses one-way data, which means unidirectional data flow. It can send data from parent to child components. Here are some of the points that are shown below in detail:
1) Managing Local data: Every component contains its state for handling the data. It’s managed by the component itself.
Example
Code:
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
</div>
);
}
export default Counter;
Output:
2) Props sending data down: Props are used as a parameter to pass to a function. It cannot be modified by child components because they are read-only.
Example
Code:
function Child({ msg }) {
return <h2>{message}</h2>;
}
function Parent() {
return <Child msg="Hello from Parent" />;
}
3) Props sending data from parent to child Component: With the use of props, you can easily send data from the parent to the child component. If you want to send data from child to parent component, you can send through the callback function.
Example
Code:
import React from "react";
function Greet(props) {
return <h2>{props.message}</h2>;
}
function App() {
return (
<div>
<Greet message="Welcome to React!" />
<Greet message="Props make components reusable." />
</div>
);
}
export default App;
Output:
Welcome to React!
Props make components reusable.
4) Props sending data from child to parent Component: In React, child component to parent component sends data through the use of callback function.
Example
Code:
import React, { useState } from "react";
function Child({ sendData }) {
return (
<div>
<button onClick={() => sendData("Apple")}>Send Apple</button>
<button onClick={() => sendData("Banana")}>Send Banana</button>
</div>
);
}
function Parent() {
const [fruit, setFruit] = useState("");
return (
<div>
<h2>Selected Fruit: {fruit}</h2>
<Child sendData={setFruit} />
</div>
);
}
export default Parent;
Output:
Passing Different types of data as Props
Props are helpful for sending any type of data that is shown below in detail:
1) Arrays: In Array, With the use of .map() method to send data in the child component.
Example
Code:
import React from "react";
function Student({ name, age }) {
return (
<div>
<h3>Name: {name}</h3>
<p>Age: {age}</p>
</div>
);
}
function App() {
return (
<div>
<Student name="John" age={22} />
<Student name="Sara" age={20} />
<Student name="Mike" age={25} />
</div>
);
}
export default App;
Output:
Name: John
Age: 22
Name: Sara
Age: 20
Name: Mike
Age: 25
2) Strings: It can send data through the inside quotes (“ “) or curly braces{}.
Example
Code:
import React from "react";
import ReactDOM from "react-dom/client";
function Profile({ user }) {
return (
<div >
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
<p>City: {user.city}</p>
</div>
);
}
function App() {
const users = [
{ name: "John", age: 25, city: "New York" },
{ name: "Sara", age: 22, city: "London" },
{ name: "Mike", age: 30, city: "Paris" }
];
return (
<div >
<h1>User Profiles</h1>
{users.map((user, index) => (
<Profile key={index} user={user} />
))}
</div>
);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Output:
User Profiles
John
Age: 25
City: New York
Sara
Age: 22
City: London
Mike
Age: 30
City: Paris
3) Numbers: It can be passed through the curly braces{}.
Example
Code:
import React from "react";
import ReactDOM from "react-dom/client";
function Square({ number }) {
return <h2>Square of {number} is {number * number}</h2>;
}
function App() {
return (
<div>
<Square number={2} />
<Square number={5} />
<Square number={10} />
</div>
);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Output:
Square of 2 is 4
Square of 5 is 25
Square of 10 is 100
Best Practice of Props:
Props are using for read-only operations, clear and structured names. Some of the key points that are shown below:
They are used for Read-Only data and static data.
Props are managed to larger projects, such as checking the validation props
.Props use the clear and structured names.
Conclusion
This article provides a deeper understanding of React props how to send data between components from basic to advance. Props allow child components to communicate with parent components. If you are mastering in props, you can handle events between the components and send all data types such as numbers, strings, functions etc.
I suggest that you learn ReactJS from the Tpoint tech website, as it provides React.js tutorials, interview questions, and all other technology topics in easy language.
Top comments (0)