Tengo una matriz (const second) que estoy usando en el elemento de selección, que muestra números como menú desplegable {option.target}, mi pregunta: ¿hay alguna manera de verificar dentro de ese mapa (que estoy usando) si 'objetivo ' de la matriz 'segunda' es igual a 'id' de la matriz 'primera', luego el menú desplegable debe mostrar el valor de 'nombre' de la primera matriz y no los números de la matriz 'segunda', por lo que el menú desplegable debe mostrar cocina, sauna ...
¿Debería tener otro mapa dentro de ese mapa?
códigos y caja: 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);El inglés no es mi lengua materna, por lo que podría haber errores.
Se puede lograr usando .find() , que devuelve el primer elemento de una matriz que satisface la función de prueba proporcionada.
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> ); }Puede usar una combinación de funciones .map y .filter
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);Simplemente puede usar el valor en su mapa para acceder al otro miembro de la matriz a través del índice o incluso mejor a través de Array.find() o Array.findIndex() así:
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> );Versión modificada de su código: https://codesandbox.io/s/react-hook-form-array-fields-forked-vu2bfx