softare development

How to Pass Parameters Between Components in React

We can pass parameters easily between two components in React. Passing data between components is a fundamental aspect of building dynamic and interactive applications.

In this article, we shall see how to pass data in one component and receive it in another component.

To begin, you have to first install react router, if you don’t already have it installed:

yarn add react-router-dom

Next, we create a file called RouteScreen.js. We’ll create two files and pass data between them.

import React from 'react'
import ( BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './App':
import About from './About':

const RouteScreen = () => {
return(
<Router>
<div>
<Routes>
<Route exact path="/about" element={<About >} />
<Route exact path="/" element={<Home >} />
<Routes>
<div>
</Router>
)
}
export default RouteScreen;

Since we’re going to be passing parameter to our about component, we need to indicate that in our RouteScreen file.

<Route exact path="/about/:id" element={<About >} >

Next, we will define what type of data we want to pass and we will do that in our home component. You can decide to pass any data you want, but most commonly it is used to pass API parameters. For the sake of this tutorial we will pass a simple “hello”.

In our App.js file, we pass the following:

import React from 'react';
import {Link} from 'react-router-dom';

const App = () => {
return(
<div>
<Link to={`/discussion-description/hello`} className="col-sm-12">Pass Data</Link>
</div>
)
}

export default App;

Finally, we want to be able to retrieve the passed parameter in our other component. We do the following:

import React from 'react';
import {Link, useParams} from 'react-router-dom';

const About = () => {
const { id } = useParams();
  return(
    <div>
    <h2>{id}</h2>
   </div>
)
}
export default About;

Explanation

To retrieve the passed parameter from our parent component, we have to use useParams, which is a hook available in the React Router library. This is how to pass parameters easily between two components in React.

React State Management

Earn Professional Certification

codefussion quiz certificate

Recent Posts

Why parseInt(’09’) Returns 0

If you've ever encountered the puzzling behavior of parseInt('09') returning 0 in JavaScript, you're not…

2 days ago

Event Bubbling and Capturing: Why Your Click Listener Fires Twice (And How to Fix It)

If you’ve ever built an interactive web application, you may have encountered a puzzling issue:…

1 week ago

Practical Array Methods for Everyday Coding

Arrays are the backbone of programming, used in nearly every application. Whether you're manipulating data,…

2 weeks ago

What the Heck Is the Event Loop? (Explained With Pizza Shop Analogies)

If you've ever tried to learn JavaScript, you’ve probably heard about the "Event Loop"—that mysterious,…

2 weeks ago

Why [] === [] Returns false in JavaScript (And How to Properly Compare Arrays & Objects)

JavaScript can sometimes behave in unexpected ways, especially when comparing arrays and objects. If you've…

2 weeks ago

Recursion for Beginners

Recursion is a programming technique where a function calls itself to solve smaller instances of…

2 weeks ago