CODEWITHSUNDEEP
javascripthtmlcssarraysreactjs
walee
walee

Reputation: 615

use another arrays value in another array

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.

Upvotes: 0

Views: 68

Answers (3)

CKE
CKE

Reputation: 470

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

Upvotes: 0

Ro Milton
Ro Milton

Reputation: 2536

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

Upvotes: 1

Ahmed Gaafer
Ahmed Gaafer

Reputation: 1661

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

Upvotes: 0

Related Questions