How can I destructure an array within my object in React ES6?

Question

I'm currently developing a React app where an Application will be selected, and the waterTypes for this application should then be returned.

I therefore need to destructure the waterTypes array within my filtered ApplicationData object. The array will have either 1, 2, or 3 values present.

Currently my waterTypes variable is returning undefined to the console. How can I get this to return the waterTypes from the selected Application?

ChoicesProvider.js

import React, { createContext, useState } from "react";

export const ChoicesContext = createContext(null);

export const ChoicesProvider = ({ children }) => {
  const [choices, setChoices] = useState({
    category: null,
  });

  return (
    <ChoicesContext.Provider value={{ choices, setChoices }}>
      {children}
    </ChoicesContext.Provider>
  );
};

ApplicationData.js

const ApplicationData = [
  {
    name: 'App1',
    waterTypes: ['Type 1']
  },
  {
    name: 'App2',
    waterTypes: ['Type 1', 'Type 2']
  },
  {
    name: 'App3',
    waterTypes: ['Type 1', 'Type 2', 'Type 3']
  },
];

export default ApplicationData

Product.js

const Product = () => {
  const { choices, setChoices } = useContext(ChoicesContext);

  const CurrentApplication = ApplicationData.filter(x => x.name === choices.category);

  const { waterTypes } = CurrentApplication;
  console.log(waterTypes);

  return (
    <>
    </>
  );
};

export default Product

Array.filter always returns another array - even if only one element is found. — jSebestyén
– jSebestyén, Commented Jun 3, 2020 at 16:55
CurrentApplication is going to be an array not a single object. If you want to destructure the first element in the array, var {waterTypes} = CurrentApplication[0]; — Patrick Evans
– Patrick Evans, Commented Jun 3, 2020 at 16:57

Ali Kleit · Accepted Answer · 2020-06-03 16:54:52Z

1

Use find instead of filter, to destructure an object not an array of one item

const ApplicationData = [
  {
    name: 'App1',
    waterTypes: ['Type 1']
  },
  {
    name: 'App2',
    waterTypes: ['Type 1', 'Type 2']
  },
  {
    name: 'App3',
    waterTypes: ['Type 1', 'Type 2', 'Type 3']
  },
];

 const CurrentApplication = ApplicationData.find(x => x.name === 'App3');

  const { waterTypes } = CurrentApplication;
  
  console.log(waterTypes)

answered Jun 3, 2020 at 16:54

Ali Kleit

3,7793 gold badges28 silver badges44 bronze badges

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

Comments

Hari · Accepted Answer · 2020-06-03 16:55:10Z

0

Array.filter always returns an array

const Product = () => {
const { choices, setChoices } = useContext(ChoicesContext);

const CurrentApplication = ApplicationData.filter(x => x.name === choices.category);

const { waterTypes } = CurrentApplication[0];
console.log(waterTypes);

 return (
  <>
  </>

); } ;

answered Jun 3, 2020 at 16:55

Hari

1461 silver badge15 bronze badges

Comments

subashMahapatra · Accepted Answer · 2020-06-03 16:58:32Z

Array.prototype.filter will always return an array, if you want to use filter you have loop over the filteredArray to get the value

const applicationData = [
  {
    name: 'App1',
    waterTypes: ['Type 1']
  },
  {
    name: 'App2',
    waterTypes: ['Type 1', 'Type 2']
  },
  {
    name: 'App3',
    waterTypes: ['Type 1', 'Type 2', 'Type 3']
  },
];

const filteredArray = applicationData.filter(data => data.name === 'App3');

for (let item of filteredArray) {
  const { waterTypes } = item;
  
  console.log(waterTypes);
  
}

Also you can use Array.prototype.find is you only want to find one item in the array based of a condition.

For example,

const applicationData = [
  {
    name: 'App1',
    waterTypes: ['Type 1']
  },
  {
    name: 'App2',
    waterTypes: ['Type 1', 'Type 2']
  },
  {
    name: 'App3',
    waterTypes: ['Type 1', 'Type 2', 'Type 3']
  },
];

const { waterTypes } = applicationData.find(data => data.name === 'App3');

console.log(waterTypes)

Collectives™ on Stack Overflow

How can I destructure an array within my object in React ES6?

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