use another arrays value in another array

Question

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.

What's the use of {" "} in your code?

Ossama Ismaili
– Ossama Ismaili

2022-03-09 23:21:44 +00:00
Commented Mar 9, 2022 at 23:21 — Ossama Ismaili
– Ossama Ismaili, Commented Mar 9, 2022 at 23:21

Ro Milton · Accepted Answer · 2022-03-09 23:16:36Z

1

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>
  );
}

Live Example

answered Mar 9, 2022 at 23:16

Ro Milton

2,54616 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Gaafer · Accepted Answer · 2022-03-09 23:15:16Z

0

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);

answered Mar 9, 2022 at 23:15

Ahmed Gaafer

1,6811 gold badge11 silver badges32 bronze badges

Comments

CKE · Accepted Answer · 2022-03-09 23:17:26Z

0

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

answered Mar 9, 2022 at 23:17

CKE

4703 silver badges14 bronze badges

Collectives™ on Stack Overflow

use another arrays value in another array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related