My setState is not working. Help me out in this?

1 
import React, { Component } from 'react';
import CategoriesGrid from './CategoriesGrid';

class ImageGrid extends Component {
    constructor(props) {
        super(props);
        this.state = {
            heading: ""
        }
    }

    categoriesHead = () => {
       this.setState(state => {
            return {
                heading: state.heading + "CATEGORIES"
            }
        });
    }
    render() {
        return (
            <div>
                {console.log(this.categoriesHead)}
                <CategoriesGrid categoriesHead = { this.categoriesHead } />  
            </div>
                              
        );
    }
}

export default ImageGrid;
2

What are you expecting this to do and what is it currently doing?

If I had to guess, I would assume that what you are hoping to achieve is something like ‘take the heading from state and append “CATEGORIES” to it’.

There are a few things for you to think about in this broken implementation.

When should the heading get the categories label added?
Is there an event that should trigger this?
How do we read value off of the state?

At the moment, you have a class method that seems to want to setState to update the header - but it is currently not listening for or responding to events.

You could call the method with an event, but you currently no not. You do attempt to console.log(this.categoriesHead) but this will not actually call it and return a value. this.categoriesHead() would trigger it, but probably still would behave the way you are hoping, since you are not returning a value from that method - you are only updating state. You don’t try to read that state or render it anywhere yet.

Things it may help you to look into:

Lifecycle methods, such as componentDidMount.
How to render a value from state.

Let me know if you need more pointers.