Passing in Items as Props to be used in React Native Drop Menu

Question

I have some React code to render a react-native-dropdown-picker DropMenu that looks like so:

export const DropMenu = () => {
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState(null);
   const [items, setItems] = useState([
     { label: 'A', value: 'a' },
     { label: 'B', value: 'c' },
     { label: 'C', value: 'c' }
   ]);
    
   return (
     <DropDownPicker
       open={open}
       value={value}
       items={items}
       setOpen={setOpen}
       setValue={setValue}
       setItems={setItems}
     />
   );
 }

What I'd like to do is make this re-useable by simply passing in the implementation details for the items to be used in the menu. What would that look like? Something like this, using the spread operator? I am unclear on what the syntax would look like specifically:

export const DropMenu = props => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
  const [items, setItems] = useState([
    { 
      label: [...props.items.label], 
      value: [...props.items.value] 
    }
   ]);
  ]);

  return (
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
    />
  );
}

And I'd pass in props that look like this:

const items = [
​ { label: 'A', value: 'a' },
 { label: 'B', value: 'c' },
 ​{ label: 'C', value: 'c' }
];

How can I pass in an array of values to be used in the DropMenu via props?

Answer 1

You can use

const [items, setItems] = useState([...props.items])

Solution can be found here.