javascript array.includes doesn't work right in react

Question

First of all, I'm a newbie at frontend, so my knowledge about javascript + react is based on tutorials.

I have an object that is set to the component properties. This object has an array as a property.

So inside the component, either in a function or the render method, if a write a console.log(object.property)

It prints the array, no error.

But if I try to use the .includes method

console.log(object.property.includes("string"))

it throws the following error:

react-dom.development.js?cada:12404 Uncaught TypeError: Cannot read property 'includes' of undefined

so how does the array turn into undefined just for using this method?

The workaround I found, is something like this:

   render() {
    let self = this;
    let user;
    return(
      {
        this.props.otherarray.map(function(var) {
            self.user = self.props.object.property.includes("string") 
        })
        console.log(this.user)
      }
    );
   }

and then it works.

What am I missing? Is it something about javascript context or react stuff?

How were you using it before the workaround, ie include that particular code in your question — Patrick Evans
– Patrick Evans, Commented Sep 5, 2018 at 16:39
That code really doesn't make sense. What exactly are you trying to do? map() needs a return or get array of all undefined values and you usually use the var to do something in the map callback — charlietfl
– charlietfl, Commented Sep 5, 2018 at 16:42

devserkan · Accepted Answer · 2018-09-05 17:01:12Z

1

console.log output is misleading you. I guess object is coming from an async job and you are seeing the array in the first render as undefined and it the second render as it is. Being undefined is not a problem but if you try to use a method on a nonexistent property like map, includes is a problem and you get the error quoted in your question. So, you need to check the existence of this property. I don't know your component setup but here is an example:

const object = {
  property: [ "foo", "bar", "baz" ]
}

const fakeRequest = () => new Promise( resolve =>
  setTimeout(() => resolve(object),1000)
);

class App extends React.Component {
  state = {
    object: {},
  }
  componentDidMount() {
    fakeRequest().then(this.setState({object}))
  }
  render() {
    const { object } = this.state;
    object.property && console.log(object.property.includes("foo"))
    return <div>Foo</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

answered Sep 5, 2018 at 17:01

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

4 Comments

André Vigneaux Over a year ago

Thank you. It does work, let me understand something. I have a mapDispatchToProps method, where are defined the requests to dispatch. Then all of this methods are executed on the componentWillMount method. Then I have a reducer that put the response in a state object, and I map this object to my props on my mapStateToProps method. I assume this whole process is done in background? (I just followed how it was done in the legacy code).

André Vigneaux Over a year ago

and why does "object.property && console.log(object.property.includes("foo"))" wait for property to not be undefined? What can I read to understand this way of using operators?

devserkan Over a year ago

You are welcome. You are using Redux and what you explain here is the regular process. But, the delay itself is about an asynchronous operation probably, you are getting the data somewhere else which is remote. We use here && so we guarantee if there is object.property then log it. You will use this logic in your components frequently: conditional rendering. Not just logging but for rendering the data itself.

devserkan Over a year ago

So, just read this: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and do some search about conditional rendering in React. It will help you to understand the logic. Also, do not use componentWillMount since it will be deprecated in the future releases. You can use componentDidMount instead.

Collectives™ on Stack Overflow

javascript array.includes doesn't work right in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related