REACT router: route component with multiple same-type components

I have a task to create a water quality monitor and I need to display a chart based on the data of each device. I’m not sure how to go about routing. I’m just a beginner in react.

Basically,

page-1: All devicesEach device has a button that should render the <LineChart /> based on its own data,

page-2: Line chart of selected device

This is my code so far:

App Component

import { Switch, Route } from "react-router";
import Main from "./components/Main";
import LineChart from "./components/LineChart";

function App() {
  return (
    <div className="app">
      <Switch>
        <Route path="/" exact component={LineChart}>
          <Main />
        </Route>
        <Route path="/chart" component={LineChart}>
          <LineChart />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

Main Component

import Data from "../data/data.json";
import Device from "./Device";

function Main() {
  return (
    <div className="main">
      <h1 className="main-title">Water Quality Monitor</h1>
      <div className="devices">
        {Data.devices.map((elem, index) => {
          return (
            <Device data={Data} index={index} key={Data.devices[index].id} />
          );
        })}
      </div>
    </div>
  );
}

export default Main;

Device Component

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

function Device({ data, index }) {
  let device = data.devices[index],
    temp,
    temp_HB = data.limits[0].items[0].upper,
    temp_LB = data.limits[0].items[0].lower,
    oxygen,
    oxygen_HB = data.limits[0].items[1].upper,
    oxygen_LB = data.limits[0].items[1].lower,
    currentTime = new Date().getTime();

  const getTemp = () => {
    device.items[0].items.forEach((elem) => {
      if (currentTime >= elem.timestamp) {
        temp = elem.value;
      }
    });
  };

  const getOxygen = () => {
    device.items[1].items.forEach((elem) => {
      if (currentTime >= elem.timestamp) {
        oxygen = elem.value;
      }
    });
  };

  // setInterval(() => {
  getTemp();
  getOxygen();
  // }, 2000);

  return (
    <div className="device">
      <h2 className="device-title">{device.name}</h2>
      {/* ----- TEMPERATURE ----- */}
      <div className="container">
        <div className="quality">
          <h4 className="quality-name">Temperature</h4>
          <p>
            <span className="quality-value">{temp || "-"} </span> °C
          </p>
        </div>
        <div className="bounds">
          <p>L: {temp_LB || "null"}</p>
          <p>
            <span className="text-">H</span>: {temp_HB || "null"}
          </p>
        </div>
      </div>
      {/* ----- OXYGEN ----- */}
      <div className="container">
        <div className="quality">
          <h4 className="quality-name">Oxygen</h4>
          <p>
            <span className="quality-value">{oxygen || "-"} </span> (mg/l)
          </p>
        </div>
        <div className="bounds">
          <p>L: {oxygen_LB || "null"}</p>
          <p>H: {oxygen_HB || "null"}</p>
        </div>
      </div>

      {/* ----- BUTTON ----- */}
      <Link>
        <button className="btn">View chart</button>
      </Link>
    </div>
  );
}

export default Device;

Also, is there a better way to handle extracting and using the data from the JSON file?

Answer

You can create a home page which shows all the data at /home or something else. Then, you can add params as /home/:selectedDeviceId to route individual data of selected devices.

If someone visits /home he will see all data and they visit /home/:id they see data of only selected device.

<Switch>
 <Route path='/home' component={AllDevicesComponent} />
 <Route path='/home/:id' component={SingleDeviceComponent} />
</Switch>