Rest parameters produces an error in my react-bootstrap component?

Question

This always works for me but for some reason, it does not work in my react-bootstrap component and this is confusing, rest parameter {classes, ...props} cause the code to throw an error and don't know why??

When i tried to reproduce the error in codesandbox everything worked ok , but the error still in my machine even after creating many new projects and removing all packages that can affect code till i reached to the point that i have created a very basic project i uploaded it on github here

Just importing the ReusableDropdown component from dropdown.js file produced a type error and react says that the error happens in the component itself not inside the parent component:

./src/reusable/dropdown.js
TypeError: Cannot read property 'forEach' of undefined

This should work and i am sure the error has no relation to the syntax, that's a kind of weird error!!

PS: You need to install react-bootstrap and bootstrap as dependencies to be able to reproduce the error

I can't see how Cannot read property 'forEach' of undefined could be related to an object, since objects don't have forEach ... unless there's some transpiling going on — Jaromanda X
– Jaromanda X, Commented Oct 1, 2019 at 1:06
i uploaded the code on github and the link is in the question! — Code Eagle
– Code Eagle, Commented Oct 1, 2019 at 1:09
believe me i am so confused about that error, i am used to that syntax and it never produced any error before, now it does!! — Code Eagle
– Code Eagle, Commented Oct 1, 2019 at 1:10

Misol Goh · Accepted Answer · 2019-10-01 01:33:52Z

1

It could be an off-topic, but, since I saw there is no classes in <ReusableDropdown> component,

<ReusableDropdown text="his"/>

I want to suggest adding defaultProps like following

import React, { Component } from 'react';
import { Dropdown } from 'react-bootstrap';

export default ({classes = [], ...props}) => {
  return (
    <Dropdown>
       <Dropdown.Toggle className={classes.toggle}>{props.text}</Dropdown.Toggle>
       <Dropdown.Menu>
         <Dropdown.Item>hi</Dropdown.Item>
       </Dropdown.Menu>
    </Dropdown>
  );
}

Or, you can check null value

<Dropdown>
  <Dropdown.Toggle className={classes && classes.toggle}>
    {props.text}
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item>hi</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

And, I'm understanding that Dropdown.Toggle requires id prop. Could you check required props as well?

edited Oct 1, 2019 at 1:33

answered Oct 1, 2019 at 1:17

Misol Goh

1,2632 gold badges8 silver badges9 bronze badges

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

3 Comments

Code Eagle Over a year ago

Thank you but this is not the answer of my question, classes should work without a default value , but my question is about why spread syntax cause a that weird error

Misol Goh Over a year ago

As I understand, props should be an object in your code. Can you check this code <Dropdown.Toggle className={classes.toggle}>{props && props.text}</Dropdown.Toggle> ?

Code Eagle Over a year ago

any way thank you, i appreciate your trial to help!

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

@Jaromanda X @Misol Goh Thanks for trying to help

after many hours trying to debug, i found this thread that answered my question

Cannot read property 'forEach' of undefined in React

Solution 1:

adding the following to package.json:

"resolutions": {
    "eslint-loader": "3.0.2"
  }

Solution 2:

downgrade to 3.0.1 version of react-scripts as the newer version caused that error for many users

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 1, 2019 at 2:52

Code Eagle

1,2603 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

Rest parameters produces an error in my react-bootstrap component?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related