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.

Your prop is named list, so you'd access that instead: props.list.map(... — Clarity
– Clarity, Commented Nov 24, 2019 at 20:21

Jon B · Accepted Answer · 2019-11-25 10:54:52Z

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

edited Nov 25, 2019 at 10:54

answered Nov 24, 2019 at 21:33

Jon B

2,8842 gold badges20 silver badges20 bronze badges

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

5 Comments

Z-Soroush Over a year ago

when i use this way it throw an error >TypeError: Cannot read property 'map' of undefined

Jon B Over a year ago

See the codesandbox link above for a working example

Z-Soroush Over a year ago

yes, that's working properly.and can you tell me how to fix eslint >'list.map' is missing in props validation eslint(react/prop-types) error? `i mean to show how to add propTypes and defaultProps

Jon B Over a year ago

I'd appreciate an upvote if this was helpful, for proptypes just add a propType of list: arrayOf(Object) and make sure to import { arrayOf, Object } from 'prop-types' set the defaultProps list value to []

Jon B Over a year ago

was this the accepted answer? If so could you click on the accepted answer tick to help others who might visit this question?

Z-Soroush · Accepted Answer · 2019-11-25 10:31:07Z

1

as @Clarity pointed out in comment I solved the problem by changing

const [parentProps] = props;

to

const parentProps = props;

and

parentProps.map((content) => (

to

parentProps.list.map((content) => (

edited Nov 25, 2019 at 10:31

answered Nov 24, 2019 at 21:04

Z-Soroush

3541 gold badge3 silver badges10 bronze badges

Comments

Rander Gabriel · Accepted Answer · 2019-11-24 21:18:41Z

0

Change const [parentProps] = props; to const {list: parentProps} = props;

Note that the [] in this context is used to destructure arrays, and that is why it shows the error:

Invalid attempt to destructure non-iterable instance

when you are destructuring an object you should pass in the destructor what is the field you want to take from the source object. More info can be found here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

answered Nov 24, 2019 at 21:18

Rander Gabriel

6474 silver badges14 bronze badges

2 Comments

Z-Soroush Over a year ago

thank you, it worked in this way but eslint give error>' list' is missing in props validation. and i dont want add props validation.

Rander Gabriel Over a year ago

You are using propTypes?

Berk Elmas · Accepted Answer · 2019-11-24 20:47:29Z

-1

you should use

props.parentProps.map(content => {...})

answered Nov 24, 2019 at 20:47

Berk Elmas

191 silver badge3 bronze badges

4 Comments

Z-Soroush Over a year ago

I don't know because of hook or not but when changing my code this way that throw error.>Cannot read property 'map' of undefined

Berk Elmas Over a year ago

above you seem to destructure prop not correctly, it should be: const {parentProps} = props; instead of; const [parentProps} = props;

Clarity Over a year ago

this is incorrect, there's no parentProps prop passed to child component.

Z-Soroush Over a year ago

@Berk Elmas you got it wrong. my props are an array of objects.

Collectives™ on Stack Overflow

react hooks: Can't create list with map function

4 Answers 4

5 Comments

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related