Currently, I am working with an array (const second) that is being used in a select element to display numbers as dropdown options {option.target}. My question is: Is there a way to check within this map (that I'm using) if the 'target' from the 'second' array matches the 'id' from the 'first' array? If they match, then the dropdown should display the value of 'name' from the first array instead of the numbers from the 'second' array. Therefore, the dropdown should show options like kitchen, sauna...
Do I need to include another map within this map?
For code examples and sandbox demonstration visit: here
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
function App() {
const first = [
{ id: 0, mode: "camera", name: "Home" },
{ id: 1, mode: "room", name: "Kitchen" },
{ id: 2, mode: "room", name: "Sauna" }
];
const second = [
{ id: 0, source: 0, target: 1 },
{ id: 1, source: 0, target: 2 }
];
return (
<div>
<select>
{second?.map((option) => (
<option>{option.target}</option>
))}{" "}
</select>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);I apologize for any language mistakes, English is not my native tongue.