Unable to show a pie chart using recharts for a reactjs app while using props from another component

See more:

Javascript

ReactJS

ES6

Hi,

I need help with this ReactJS application in making a Pie chart.

So there are three components namely: Devdropdown , the main one and two child ones are Tables.jsx and Chart.jsx.

So, the table got displayed while passing props from the parent component. And I wanted the same way for the Pie Chart to occur as well. The scene is, the user selects an option from the dropdown which enables them to see the table data along with the Pie Chart. I am having issues with the Pie Chart. At times it is being displayed, at times it isn't. Here are the three jsx files:

What I have tried:

Devdropdown.jsx

import React, { useState, useEffect, useMemo } from "react";
import Tables from "./Tables";
import Chart from "./Chart";

const Devdropdown = () => {
  const [devices, setDevices] = useState([{}]);
  const [selected, setSelected] = useState();
  const url = "..";

  useEffect(() => {
    async function getDevices() {
      const response = await fetch(url);
      const body = await response.json();
      setDevices(body.data);
    }
    getDevices();
  }, []);

  const handleChange = (e) => {
    e.preventDefault();
    setSelected(e.target.value);
  };

   const deviceMap = useMemo(() => {
    const grouped = new Map();
    for (const device of devices) {
      const currDeviceArr = grouped.get(device.device_id) ?? [];
      currDeviceArr.push(device); // adding the current device to the associated device_id array
      grouped.set(device.device_id, currDeviceArr);
    }
    return grouped;
  }, [devices]);

  console.log(deviceMap);

  return (
    <react.fragment>
      <div>
        <div>
          <h1>Aircraft {selected}</h1>
          <select
 value="{selected}
" onchange="{handleChange}
" placeholder="select an option" 
="">
            {devices
              ? Array.from(deviceMap.keys(), (device_id) => (
                  
                    {device_id}
                  
                ))
              : null}
          
          <br>
          <br>
          <tables data="{deviceMap.get(selected)}">
        </div>
        <div>
          <chart chartdata="{deviceMap.get(selected)}">
        </div>
      </div>
    
  );
};

Tables.jsx

    import React from "react";
import Table from "react-bootstrap/Table";

const Tables = ({ data = [] }) => {
  return (
    
              {data.map((device, i) => (
                  ))}
      <table><thead>        <tr>          <th>Timestamp</th>          <th>Location</th>        </tr>      </thead>      <tbody><tr>            <td>{device.timestamp}</td>            <td>{device.location}</td>          </tr></tbody>    </table>
  );
};

Charts.jsx

import React from "react";
import { PieChart, Pie, Cell } from "recharts";

const Chart = ({ chartData = [] }) => {
  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
  return (
    <piechart width="{700}" height="{700}">
      <pie
 data="{chartData.map((device)" ==""> device.location)}
        dataKey="locations"
        cx={120}
        cy={200}
        innerRadius={60}
        outerRadius={80}
        fill="#8884d8"
        paddingAngle={5}
      >
        {chartData.map((entry, index) => (
          <cell key="{`cell-${index}`}" fill="{COLORS[index" %="" colors.length]}="">
        ))}
      
    
  );
};

export default Chart;

Here is how deviceMap looks like in the console. As you can see, I have already clicked on an option and the table details are also present. The same way , a Pie Chart should also be there with the Locations . If you guys could spare your time and tell me what should be done.

I have console logged the deviceMap object. 

Map(5) {'D-1567' => Array(5), 'D-1568' => Array(5), 'D-1569' => Array(5), 'D-1570' => Array(1), 'D-1571' => Array(1)}
[[Entries]]
0
: 
{"D-1567" => Array(5)}
key
: 
"D-1567"
value
: 
Array(5)
0
: 
{id: 1, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:35:00.000Z', location: 'L1'}
1
: 
{id: 2, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:40:00.000Z', location: 'L1'}
2
: 
{id: 3, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:45:00.000Z', location: 'L1'}
3
: 
{id: 4, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:50:00.000Z', location: 'L1'}
4
: 
{id: 5, device_id: 'D-1567', device_type: 'Aircraft', timestamp: '2022-08-31T04:55:00.000Z', location: 'L2'}
length
: 
5
[[Prototype]]
: 
Array(0)
1
: 
{"D-1568" => Array(5)}
2
: 
{"D-1569" => Array(5)}
3
: 
{"D-1570" => Array(1)}
4
: 
{"D-1571" => Array(1)}