Adding to an array in react if there is not a match

Question

I have two arrays, one which I am passing in as props called 'navPrimary' and the other which I am storing in state called 'dataArray'. What I am trying to do is loop through the navPrimary array and then grab the label and only add it to the 'dataArray' if it don't already exist. So far it works but will add it if it exists or not. I know I can use indexOf or filter to get what I need I just not know the syntax or wrapping technique to get it to work.

const [dataArray, setDataArray] = useState([]);

setDataArray(dataArray.concat(navPrimary.map((item) => item.label)));

Virtuoz · Accepted Answer · 2021-04-28 20:47:23Z

2

If you don't want dataArray to contain duplicate elements at all Set can help:

setDataArray([...new Set(dataArray.concat(navPrimary.map((item) => item.label)))]);

answered Apr 28, 2021 at 20:47

Virtuoz

9241 gold badge8 silver badges15 bronze badges

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

Comments

peter · Accepted Answer · 2021-04-28 20:47:49Z

1

Try this:

setDataArray(dataArray.concat(navPrimary.map((item) => item.label)).filter(label => !dataArray.includes(label)));

answered Apr 28, 2021 at 20:47

peter

5932 silver badges12 bronze badges

Comments

kemicofa · Accepted Answer · 2021-04-28 21:05:16Z

0

I would create a separate hook to handle this generic logic and change how you store the data.

// hooks.js
export const useUniqueElements = (data) => {
  const [dataSet, updateDataSet] = useState(new Set(data));
  
  const addElements = (newData) => {
    updateDataSet(new Set([
      ...dataSet,
      ...newData
    ]));
  }

  return {
    data: [...dataSet],
    addElements
  }
}

// helpers.js

export const getLabels = (data) => data.map(({label}) => label);

// MyComponent.js
const MyComponent = (initialList) => {
  const {addElements, data} = useUniqueElements(getLabels(initialList));

  const onSubmit = (newList) => {
    addElements(getLabels(newList));
  }

  // render stuff here
}

answered Apr 28, 2021 at 21:05

kemicofa

17.7k10 gold badges92 silver badges145 bronze badges

Collectives™ on Stack Overflow

Adding to an array in react if there is not a match

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