Search code examples
javascriptreactjsreact-propsreact-componentreact-class-based-component

How to fix - Functions are not valid as a React child?

I’m calling a function that returns some html code.

But if I want to send this function a parameter, then it tells me that Functions are not valid as a React child, the problem is that I want to access the props from the function, in order to do that, I changed the call in jsx as:

... ...
{this.showActivitiesIcon.bind(this)}
... ...

I tried setting a state inside the component, and setting the state from componentDidMount

    componentDidMount = () => {
        this.setState({
            currentCountry: this.props.country
        })
    }

But, inside componentDidMount, there’s no such thing as this.props.country, and it’s useless to set this.componentDidMount.bind(this) inside the constructor. What can I do to fix it?

Solution

  • Here is the correct syntax, because bind(thisArg) returns a function:

    {this.showActivitiesIcon.bind(this)()}