How to use id of useParams in reactjs

October 23, 2022

i’m making a program where i have to show statistics on temperatures, co2, methane … and instead of creating single pages i wanted to create one and show the content dynamically using useParams. the idea is: click on temperatures and the page shows the data about the temperature that are taken from an object.
the problem is that I can’t use what useParams gives me back

My app.js

import './App.css';
import { Route, Routes, NavLink } from 'react-router-dom';
import Home from './Home';
import Render from './Render';


function App( props ) {
  return (
    <div className="App">
      <nav>
        <ul>
          <li>
            {/* <NavLink to="/" state="h1" >Home</NavLink> */}
            <NavLink to="/" >Home</NavLink>
          </li>
          <li>
            {/* <NavLink to="/" state="h1" >Home</NavLink> */}
            <NavLink to="/render/:id" >Render</NavLink>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path='/' element={<Home />}></Route>
        <Route path='/render/:id' element={<Render />}></Route>

      </Routes>
    </div>
  );
}

export default App;

my data

const DataPages = {
    temperature: {
        title: 'Temperature',
        subtitle: 'Global temperature anomalies from year 1880 to present',
        description: `The current global warming rate is not natural,
        from 1880 to 1981 it was (0.07°C / 0.13°F) per decade and since 1981 this rate has increased to (0.18°C / 0.32°F).
        The total average global temperature rise since the industrial revolution is around (1.0 °C / 1.8 °F)
        and earth northern hemisphere is warming faster. The arctic has warmed between (2 °C / 3.6 °F) and (4 °C / 7.2 °F).
        Earth temperature and the proportion of gases such as Co2, methane, and nitrous oxide in the atmosphere is strictly correlated.`,
        link:
            'https://www.climate.gov/news-features/understanding-climate/climate-change-global-temperature',
    },
    co2: {
        title: 'Carbon Dioxide',
        subtitle: 'Carbon Dioxide levels from 2012 to present',
        description: `For thousands of years, the natural concentration of CO2 in earth atmosphere was around 280 ppm.
        From the beginning of the industrial revolution, human activities like the burning of fossil fuels, deforestation,
        and livestock have increased this amount by more than 30%.`,
        link:
            'https://www.climate.gov/news-features/understanding-climate/climate-change-atmospheric-carbon-dioxide',
    },
    methane: {
        title: 'Methane',
        subtitle: 'Methane levels from 1983 to present',
        description: `Methane is a flammable gas formed by geological and biological processes.
        Some of the natural ones are leaks from natural gas systems and wetlands.
        50-65% of total global methane emissions come from human activities, these include:
        livestock, agriculture, oil and gas systems, waste from homes and businesses, landfills, and so on.
        Methane is a gas with a global warming potential several times stronger than of CO2. For more than 650,000 years, 
        methane concentration in the atmosphere was between 350 - 800 parts per billion (ppb). 
        From the beginning of the industrial revolution, human activities have increased this amount by around 150%.`,
        link: 'https://earthobservatory.nasa.gov/images/146978/methane-emissions-continue-to-rise',
    },
}

export default DataPages;

here instead of "co2" I should enter the id

import React from 'react'
import Content from './Content'
import DataPages from './DataPages'
import { useOutletContext, useParams } from 'react-router-dom'


function Render() {

    let {id} = useParams();
    

  return (
    <div>
        <Content
       title= {DataPages.co2.title }
       subtitle={DataPages.co2.subtitle}
       description={DataPages.co2.description}
       

     ></Content>
    </div>
  )
}

export default Render

>Solution :

You only need to find the page by id and use it in the Content properties.

  const page = DataPages[id];

  <Content
       title= {page.title }
       subtitle={page.subtitle}
       description={page.description}
    ></Content>

You may also want to check if the page exists if(page). If it does, you render content. Otherwise, render something else.

if(page) {
  return <Content
       title= {page.title }
       subtitle={page.subtitle}
       description={page.description}
    ></Content>
 } else {
     return <Content
       title="Page not found"
       subtitle=""
       description=
    ></Content>
}