CODEWITHSUNDEEP
reactjs
user5282752
user5282752

Reputation:

What does "TypeError: props.data.map is not a function" mean and how to solve it in react


This code is written for a component named LISTVIEW_COMPONENT.js. The parent component called INDEX.JS.

INDEX.JS has passed a prop into this component named data which is basically a test data dictionary.
When I tried to loop through the props.data it gives me an error

"TypeError: props.data.map is not a function"

LISTVIEW_COMPONENT.JS

import React from "react";
import ListItemComponent from "./Listitem_component";

const ListViewComponent = props => {
    const DATA = props.data.map(list_item => {
        return (<ListItemComponent key={list_item.key} data={list_item} />);
    });
    return <ul>{DATA}</ul>;
};
export default ListViewComponent;





INDEX.JS

import React from "react";
import ReactDOM from "react-dom";
import SearchComponent from "./components/Search_component";
import ListViewComponent from "./components/Listview_component";

const API_KEY = "";
const DATA = ({
    key: 1,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary one"
},
{
    key: 2,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary two"
},
{
    key: 3,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary three"
});

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    do_search(keyword) {
        console.log(keyword);
    }

    render() {
        return (
            <div>
                <SearchComponent
                    searchkeyword={keyword => {
                        this.do_search(keyword);
                    }}
                />
                <ListViewComponent data={DATA} />
            </div>
        );
    }
}

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

Upvotes: 0

Views: 141

Answers (2)

Alexandre Annic
Alexandre Annic

Reputation: 10738

map is for array. This code is invalide: 

const DATA = ({
    key: 1,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary one"
},
{
    key: 2,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary two"
},
{
    key: 3,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary three"
});

and result to a simple object.

If you add console.log(DATA), you will see the following object:

{
    key: 3,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary three"
}

Refacto as follow to get a correct array:

const DATA = [{
    key: 1,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary one"
},
{
    key: 2,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary two"
},
{
    key: 3,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary three"
}];

Upvotes: 0

Paul McLoughlin
Paul McLoughlin

Reputation: 2289

You need to wrap you objects in data in an array, otherwise .map will not work. Right now you're using () which will not work.

const DATA = ({
    key: 1,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary one"
},
{
    key: 2,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary two"
},
{
    key: 3,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary three"
});

Should be 

const DATA = [{
    key: 1,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary one"
},
{
    key: 2,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary two"
},
{
    key: 3,
    src: "http://via.placeholder.com/64x64",
    summary: "this is summary three"
}]

Upvotes: 1

Related Questions