close

React JS – Uncaught TypeError: this.props.data.map is not a function

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error React JS – Uncaught TypeError: this.props.data.map is not a function in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How React JS – Uncaught TypeError: this.props.data.map is not a function Error Occurs?

Today I get the following error React JS – Uncaught TypeError: this.props.data.map is not a function in javascript.

How To Solve React JS – Uncaught TypeError: this.props.data.map is not a function Error ?

  1. How To Solve React JS – Uncaught TypeError: this.props.data.map is not a function Error ?

    To Solve React JS – Uncaught TypeError: this.props.data.map is not a function Error You need to create an array out of props.data, like so:
    data = Array.from(props.data);
    then will be able to use data.map() function

  2. React JS – Uncaught TypeError: this.props.data.map is not a function

    To Solve React JS – Uncaught TypeError: this.props.data.map is not a function Error You need to create an array out of props.data, like so:
    data = Array.from(props.data);
    then will be able to use data.map() function

Solution 1

You need to create an array out of props.data, like so:

data = Array.from(props.data);

then will be able to use data.map() function

Solution 2


It happens because the component is rendered before the async data arrived, you should control before to render.

I resolved it in this way:

render() {
    let partners = this.props && this.props.partners.length > 0 ?
        this.props.partners.map(p=>
            <li className = "partners" key={p.id}>
                <img src={p.img} alt={p.name}/> {p.name} </li>
        ) : <span></span>;

    return (
        <div>
            <ul>{partners}</ul>
        </div>
    );
}
  • Map can not resolve when the property is null/undefined, so I did a control first

this.props && this.props.partners.length > 0 ?

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment