react hooks: Can't create list with map function

Question

I have an array of objects that pass as props to child component. in child component I want to map that array to show in a list. but I got this error

Invalid attempt to destructure non-iterable instance

this is my child :

const ServiceTabs = (props) => {
  const [parentProps] = props;
  return (
    <ul>
      {
          parentProps.map((content) => (
            <li key={content.id} className="active">
              <BtnButton
                btnStyle={content.btnStyle}
                btnColor={content.btnColor}
                customTitle={content.customTitle}
                IconSRC={content.IconSRC}
              />
            </li>
          ))
}
    </ul>
  );
};

and this is my parent:

 const ServiceCategory = () => {
      const [serviceState, setserviceState] = useState([
        {
          id: 1,
          customtitle: 'hair', 
          btnStyle: {
            backgroundColor: '#fff',
            width: '100px',
            height: '100px',
            flexDirection: 'column',

          },
        },
        {
          id: 2,
          .
          .
          },        
      ]);
.
.
.
 <ServiceTabs list={serviceState} />

when i change const [parentProps] = props; to const parentProps = props; the error changes:

parentProps.map is not a function i think my problem is destructure of props.but i dont know how to do that. hope my question was clear.

Answer 1

You should just be destructuring the list prop like this and then map over that variable:

const { list } = props
list.map(content => {...})

Here is a working Codesandbox example using (mostly) your code to illustrate what I mean: https://codesandbox.io/s/distracted-pasteur-k8387?fontsize=14&hidenavigation=1&theme=dark