I just want to transfer the data from one component to a table component. So after selecting the option from the dropdown menu, it should reflect all the details of that selected option inside the table. I have made two components:
Devdropdown.jsx:
import React, { useState, useEffect, useMemo } from "react";
import Tables from "./Tables";
const Devdropdown = () => {
const [devices, setDevices] = useState([{}]);
const [selected, setSelected] = useState();
const url = "http://localhost:3000/devices";
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 uniqueDeviceIds = useMemo(
() => Array.from(new Set(devices.map((device) => device.device_id))),
[devices]
);
console.log(devices);
return (
<div>
<h1>Aircraft {selected}</h1>
<select
value={selected}
onChange={handleChange}
placeholder="select an option"
>
{devices
? uniqueDeviceIds.map((deviceId) => (
<option key={deviceId}>{deviceId}</option>
))
: null}
</select>
<Tables data={devices[selected]} />
</div>
);
};
export default Devdropdown;
Tables.jsx:
import React from "react";
const Tables = (props) => {
return (
<div>
<table>
<tr>
<th>Timestamp</th>
<th>Location</th>
</tr>
<tr>
<td>{props.data}</td>
<td>{props.data}</td>
</tr>
</table>
</div>
);
};
export default Tables;
I just want to reflect the timsetamp and location features of the selected element , inside the table. Below is the screenshot of the devices object where I want timestamp and location attributes inside the table component.
Thanks and regards