Javascript - getting TypeError is not iterable for an array

Question

I am using react and I have a component where I am setting a constant with an array of strings:

const propsToCheck = ['text', 'type', 'status', 'topic.name', 'class.0.code'];

I am sending down the children chain all the way to the component that is using it like this in the function checkObjectContainsValue that I import from another file:

constructor(props) {
    super(props);
    this.state.data = this.transformRows(props.rows.filter(obj => checkObjectContainsValue(obj, props.searchString)(props.propsToCheck)))
  }

My tests are failing then because I get an error:

TypeError: propsToCheck is not iterable

But, I noticed that if I import the checkObjectContainsValue function to a parent component where I have propsToCheck I don't get the error. But I can't have that function there for other reasons. I have checked the react developer tools and I can see that I am getting the array propsToCheck in the child component, so I am not sure why I am getting this error?

This is the function checkObjectContainsValue:

const checkObjectContainsValue = (obj, value) => (propsToCheck) => {
  for (let prop of propsToCheck) {
    const propToCheckValue = prop.split('.').reduce((currentObject,property) => {
      return currentObject[property];
    }, obj);
    if (propToCheckValue.toLowerCase().includes(value.toLowerCase())) {
      return true;
    }
  }
  return false;
};

Update

If I move the logic to a parent component then everything works fine. This is the example:

onSearchChange(event) {
    const searchString = event.target.value;
    this.setState(prevState => {
      const filteredTasks = prevState.tasks.filter(obj => checkObjectContainsValue(obj, searchString)(propsToCheck));
      return {filteredTasks: filteredTasks};
    });
  }

Why am I getting this error only when I use this function in the child component?

is your function definition is like this func()() ? as you're calling checkObjectContainsValue(obj, props.searchString)(props.propsToCheck) ? does checkObjectContainsValue return a function ? — Code Maniac
– Code Maniac, Commented May 29, 2019 at 8:00
On checking in the browser, everything works fine, and I get propsToCheck in the child component as an array — Leff
– Leff, Commented May 29, 2019 at 8:07
@Leff you're just passing two arguments to function checkObjectContainsValue whereas it expects three arguments, so the third one becomes undefined , which is not iterable — Code Maniac
– Code Maniac, Commented May 29, 2019 at 8:08

Code Maniac · Accepted Answer · 2019-05-29 08:11:22Z

1

Your function expects three argument

const checkObjectContainsValue = (obj, value, propsToCheck) => {

where as you're just passing two argument to function

props.rows.filter(obj => checkObjectContainsValue(obj, props.searchString)

so the third argument will have a value equal to undefined which is not iterable

answered May 29, 2019 at 8:11

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

3 Comments

Leff Over a year ago

Sorry, that was wrong copy pasting, this actually the signature of the function const checkObjectContainsValue = (obj, value) => (propsToCheck) => I was just testing if anything would change if I make it a normal function and not a currying one.

Leff Over a year ago

No, propToCheckValue is a value of a prop, which is a string.

Code Maniac Over a year ago

@Leff can you show how you're sending props to child ?

Collectives™ on Stack Overflow

Javascript - getting TypeError is not iterable for an array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related