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

Question

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?

Answer 1

You seem like something:

super(props)

Can you share the whole code for this component?

Answer 2

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

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

Answer 3

Seems like you're are not calling the function in your JSX.

Make sure you invoke it while using it so that it returns valid JSX.

this.showActivitiesIcon.bind(this)()