react js component gets state as null

Question

I have an error while trying to pass a state as a parameter to a component

i already gave console.log and my state is getting response from api

import React, { Component } from 'react';
import api from '../../services/api';
import Products from '../Products';
export default class index extends Component {
    constructor(props){
        super(props)
            this.state={ products: [], filteredProducts:[]}

    }
    componentWillMount(){
         api.get('/products').then( result => this.setState({
            products: result.data.listProducts,
            filteredProducts: result.data.listProducts
        }))
    }
    render() {
        return (
            <>
            <Products products={this.state.filteredProducts} handleAddToCart={this.handleAddToCart}/>
            </>
        )
    }
}

My state starts as null and after consuming api it returns correctly, but the state passed to my component is null my console .log response

[]

(5) [{…}, {…}, {…}, {…}, {…}]

erros:

TypeError: Cannot read property 'map' of undefined
const productItems = this.props.productItems.map( product => (

and my component products:

import React, { Component } from 'react'
import util from '../utils';
export default class Products extends Component {
    render() {
        console.log(this.props);
        const productItems = this.props.productItems.map( product => (
            <div className="col-md-4">
            <div className = "thumbnail text-center"> 
            <a href={`#${product.id}`}  onClick={(e)=>this.props.handleAddToCard(e,product)}>
                <p>
                    {productItems.name}
                </p>
            </a>
            </div>
                <b>{util.formatCurrency(product.price)}</b>
                <button className="btn btn-primary" onClick={(e)=>this.props.handleAddToCard(e,product)}>Add to Cart</button>
            </div>
        )
        )
        return (
            <div className="row">
                {productItems}
            </div>
        )
    }
}

it should be this.props.products.map(product => (...)) because that's how you name the props on the parent component — albert
– albert, Commented Dec 3, 2019 at 2:35

meisam · Accepted Answer · 2019-12-03 02:40:47Z

2

you need to move your side effect into componentDidMount and wait for component to be mounted and then does the async call and be refreshed. Meanwhile you need to have an if to prevent from loading the child component if the state is empty. so I would change your code to this.

import React, { Component } from 'react';
import api from '../../services/api';
import Products from '../Products';
export default class index extends Component {
    constructor(props){
        super(props)
            this.state={ products: [], filteredProducts:[]}

    }
    componentDidMount(){
         api.get('/products').then( result => this.setState({
            products: result.data.listProducts,
            filteredProducts: result.data.listProducts
        }))
    }
    render() {
        return (
            <>
             {this.state.ffilteredProducts.length > 0
             ?  <Products products={this.state.filteredProducts} handleAddToCart={this.handleAddToCart}/>
             : null

                }

            </>
        )
    }
}

or you can have a spinner instead of null

answered Dec 3, 2019 at 2:40

meisam

4857 silver badges19 bronze badges

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

1 Comment

Felipe Over a year ago

thansk a lot bro

Collectives™ on Stack Overflow

react js component gets state as null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related