Compare Two Array's And Disable A Single Element If The Id's Are Equal

I have two array in the state and both have id's. if some array have the same value (In this case 8) I would like to disable all the buttons that have this equal value. The buttons

Solution 1:

It's not quite clear where in the app hierarchy that component is so I've attempted a bit of guess work. You're almost there by the looks of things. You just need to iterate over the buttons and create them.

functionButton(props) {
  const { disabled, text } = props;
  return<buttondisabled={disabled}>{text}</button>;
}

// Buttons creates the buttons in the setfunctionButtons() {

  const setOne = [2, 6, 8];
  const setTwo = [3, 8, 4];

  // Remove the duplicates from the combined setsconst combined = [...newSet([...setOne, ...setTwo])];

  // Get your duplicate valuesconst hasDuplicateValues = setOne.filter(item => setTwo.includes(item));
  
  // `map` over the combined buttons// If `hasDuplicateValues` includes the current button, disable itreturn combined.map((n) => (
    <Buttontext={n}disabled={hasDuplicateValues.includes(n) && 'disabled'}
    />
  ));

}

ReactDOM.render(<Buttons />, document.querySelector("#root"))

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><divid="root"/>