create a new array, removing duplicates and setting state with React-CodePudding

I have a MenuOptions component that I pass an options prop to. Options is a large array of objects. Each object has a nested array called 'services' inside services is an object with a key 'serviceType' which is the only value I want. I want to take all those values, push them into a new array and remove any duplicates if there are any, and then map through that new array and display each item in an 'option' html tag.

here is my createArray function:

    const createNewArray = () => {
        let optionsArr = []
        let uniqueArr;

        options.map((option) => {
            option.services.map((service) => optionsArr.push(service.serviceType))
        })
        uniqueArr = [...new Set(optionsArr)];
        return uniqueArr;
    }

uniqArr seems to be holding what I want but now I want to set this to a piece of global state. Trying something like this does not work. array seems to still be set as null

    const [array, setArray] = useState(null)

   useEffect(() => {
      setArray(createNewArray())
   }, [])

any solutions? Thanks

CodePudding user response：

1) You should add your array state initial value as an empty array:

const [array, setArray] = useState([]);

Live Demo

2) You can simplify the creating of a new array as:

const createNewArray = () => [
  ...new Set(options.flatMap((o) => o.services.map((obj) => obj.serviceType)))
];

3) set array state in useEffect as:

useEffect(() => {
  setArray(createNewArray());
}, []);

CodePudding user response：

From your description is this your data?

const options = [{
  services: [
    {
      serviceType: 'serviceType',
    }
  ],
},{
  services: [
    {
      serviceType: 'serviceType',
    }
  ],
},{
  services: [
    {
      serviceType: 'serviceType',
    }
  ],
},
{
  services: [
    {
      serviceType: 'serviceType',
    }
  ],
}]

here is the solution

const uniq = (a) => [...new Set(a)];

const createNewArray = (array) => {
  const c = [...array]
  const newArray = []
  for (let i = 0; i < c.length; i  ) {
    const e = c[i];
    for (let ii = 0; ii < e.length; ii  ) {
      const ee = e[ii].serviceType;
      newArray.push(ee);
    }
  }
  const toReturn = uniq(newArray)
  return toReturn;
}

CodePudding user response：

If you want unique options, just pass the options in and set them to the state after you massage the data.

const { useEffect, useMemo, useState } = React;

const unique = (arr) => [...new Set(arr)];

const uniqueOptions = (options) =>
  unique(options.flatMap(({ services }) =>
    services.map(({ serviceType }) => serviceType)));

const data = {
  options: [
    { services: [{ serviceType: "Home"  } , { serviceType: "About" }] },
    { services: [{ serviceType: "About" } , { serviceType: "Help"  }] },
    { services: [{ serviceType: "Help"  } , { serviceType: "Home"  }] },
  ],
};

const MenuOptions = (props) => {
  const { options } = props;

  const [opts, setOpts] = useState([]);

  useEffect(() => setOpts(uniqueOptions(options)), [options]);

  return useMemo(
    () => (
      <select>
        {opts.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
      </select>
    ),
    [opts]
  );
};

const App = ({ title }) =>
  useMemo(
    () => (
      <div>
        <h1>Services</h1>
        <form>
          <MenuOptions options={data.options} />
        </form>
      </div>
    ),
    []
  );

ReactDOM.render(<App />, document.getElementById("react-app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react-app"></div>