props.map 不是函数 react.js

Question

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:-

But in child component getting error

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:-

Answer 1

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} />)

Answer 2

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>

Answer 3

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.