Skip to content

How to store fetched data in state and render it in my component [closed]

I have fetched the array using the graphql query and stored it in a variable called mpbrands. Now I want to store it in the state and render it in my component. I tried the below but its not giving any response

constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }     
async componentDidMount(){
        let brandQuery = BrandPageInstance.getBrandList();
        await fetchQuery(brandQuery).then((mpbrand) => {
                this.setState({
                    count: mpbrand.items
                })
                console.log(count)
            },
            (error) => console.log(error)
        )   
    }

In the console I am getting an error Uncaught (in promise) ReferenceError: count is not defined . My array structure is

mpbrand:
     items: Array(10)
             0: {default_value: "CHEVROLET", image: "image_url"}

Let me know how to do it. Since I am newbie not able to store it in the state

Answer

Try console.log(this.state.count) That should solve the reference error.

count is part of the state object. So you can access it via this.state.count.