I have an array (const second) which i'm using in select element, which shows numbers as dropdown {option.target}, my question: is there a way to check inside that map (which i'm using) if 'target' from 'second' array is equal to 'id' from 'first' array then drop down should show value of 'name' from first array and not numbers from 'second' array, so drop down should show kitchen, sauna ...
should i have another map inside that map ?
codesandbox: https://codesandbox.io/s/react-hook-form-array-fields-forked-x46672?file=/src/index.js
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);English is not my mother language so there could be mistakes.
It can be achieved using .find(), which returns the first element in an array that satisfies the provided testing function.
function App() {
const first = [
{ id: 0, mode: "camera", name: "Camera" },
{ 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>{first.find(({id}) => id === option.target).name}</option>
))}{" "}
</select>
</div>
);
}
You can use a combination of .map and .filter functions
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 }
];
const keyToExtract = 'name';
const values = second.map(value => {
return first.filter(elem => elem.id === value.target)[0][keyToExtract]
})
console.log(values);You can just use the value in your map to access the other arrays member via index or even better via Array.find() or Array.findIndex() like so:
return (
<div>
<select>
{second?.map((option) => {
const testee = first.find((el) => el.id === option.target);
return testee === undefined ? (
<option>{option.target}</option>
) : (
<option>{testee.name}</option>
);
})}
</select>
</div>
);
Modified version of your code: https://codesandbox.io/s/react-hook-form-array-fields-forked-vu2bfx