CODEWITHSUNDEEP
reactjstypescript
Ghanshyam Singh
Ghanshyam Singh

Reputation: 1381

props.map is not a functions react.js

been working on react js project. But while passing props to child component getting error props.map is not a function.

ParentComponent:-

componentDidMount = () => {
    fetch('api/dashboard/dashboarddata').then(response => response.json()).then((data: Dashboard) => {
      this.setState({
        category: data.categories,
        banners: data.banners,
        loading: false
      });
    });
  }

Passing Props

 {
      this.state.loading ? <ContentLoader /> : <div><Category {...this.state.category} /> <Banner {...this.state.banners} /> </div>
 }

This is what state object after API response:-

enter image description here

But in child component getting error

enter image description here

Child Component:

const Category = (props: brandcategory[]) => {
   
return (
    <div className="section category">
        <div className="container-fluid">
            <div className="row">
                <div className="col-md-12">
                    <div className="section-title">
                        <h4 className="title">Select interested categories</h4>
                        <div className="section-nav">
                            <a className="primary-btn cta-btn" href="#">View All</a>
                        </div>
                    </div>
                </div>
                <div className="col-md-12">
                    <div className="row">
                        <div className="col-md-10">
                            <div className="products-tabs">
                                <Slider {...sliderconfig.productSlider} className="products-slick" data-nav="#slick-nav-2">
                                    {
                                        props.map((c: brandcategory) => <CategoryCard key={c.id} {...c} />)
                                    }
                                </Slider>
                            </div>
                        </div>
                        <div className="col-md-2 text-center">
                            <div className="btn-container">
                                <a href="#" className="btn btn-3">Get Started</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
)
}

Receiving props in child component like this:-

enter image description here

Upvotes: 1

Views: 2890

Answers (3)

Drew Reese
Drew Reese

Reputation: 203532

Issue

The props is an object, you likely meant to map over a specific prop you passed, like props.category.map. You are actually attempting to spread the entire this.state.category array into props.

Solution

Pass this.state.category array as a prop.

<Category category={this.state.category} />

Then in Category component access props.category for mapping.

props.category.map((c: brandcategory) => <CategoryCard key={c.id} {...c} />)

I'm not as familiar with Typescript as I could/should be, but I'm sure you will need to update the component signature. Perhaps something like the following:

const Category = ({ category: brandcategory[] }) => { ....

And in this case category is already destructured from the props object, so you won't need to access as props.category.map but rather just category.map.

category.map((c: brandcategory) => <CategoryCard key={c.id} {...c} />)

Upvotes: 4

lucky shukla
lucky shukla

Reputation: 11

This error occurs because your data is not an array. So .map() function only works with arrays. First, you will need to confirm your data type. and also you will need to transform your data into an array.

Upvotes: 1

Suson Waiba
Suson Waiba

Reputation: 156

You have provided array with spread operators to react component, which must be object as key, value pair must exist. Refer below examples:-

const Category = ({categories}) => {
  return (
    <ul>
    {categories.map((category, index) => (
      <li key={index}>{category.name}</li>
    ))}
    </ul>
  );
}

const App = () => {
  const categories = [{name: 'Apple'}, {name: 'Ball'}];
  return <Category categories={categories} />;
}

const App2 = () => {
  const catProps = {categories: [{name: 'Apple 2'}, {name: 'Ball 2'}]};
  return <Category {...catProps} />;
}

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

ReactDOM.render(
  <App2/>,
  document.getElementById('root2')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<h1>Example 1</h1>
<div id="root"></div>

<h1>Example 2</h1>
<div id="root2"></div>

Upvotes: 2

Related Questions