How to use function inside JSX

Question

I am currently reading React official website, where I came across this question. React official website states that we can use function code inside JSX. Hence, I tried the following code, but it's not working.

class ABCD extends React.Component {

render() {
    return (
        <div>
            <p>
                {() => <div>Hello World </div>}
            </p>
        </div>
    );
}

}

I know, I know, some of you might say see the example given on the React website. I saw it, the example given on the official website involves outside function. I just want to know that can we use function inside JSX independently.

See this link for extra info: https://reactjs.org/docs/jsx-in-depth.html

Answer 1

As I feel what you are trying to do is wrong.

Object or functions are not parsable by JSX

If you just try

render() {
    return (
        <div>
            <p>
                {() => <div>Hello World </div>}
            </p>
        </div>
    );
}

You are trying to interpolate or return a function which is not acceptable as presentation node. It should be something which can be parsed by jsx. An object or a function cannot parse by JSX, they should be parsed by the Javascript engine.

What you can do is define your method and invoke that immediately so the function(iife function) returns something which could be parsed by JSX.

Something like

render() {
    return (
        <div>
            <p>
                {(() => {<div>Hello World </div>})()}
            </p>
        </div>
    );
}

Hope you get the point. Return something which can be parsable by JSX.

Answer 2

Just call a function that returns JSX. For example:

class FooComp extends React.Component {
    someFunction() {
        return (<div>Hello World!</div>);
    }

    render() {
        return (
            <div>
                    <p>
                        {this.someFunction()}
                    </p>
            </div>
        );
    }
}

Answer 3

You can try calling it as an inmediately invoked function

render() {
    return (
        <div>
            <p>
                {(() => <div>Hello World </div>)()}
            </p>
        </div>
    );
}

Answer 4

Besides the immediately invoked function mentioned in other answers, the documentation mentions that it also possible to use a function as a child, which can be invoked as props.children(...args).

The key thing is that the component must ultimately return something renderable:

Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.

Answer 5

Though it is not clear from your question that you want to define a function inside jsx or you want to call function from your jsx. If you want to define your function inside jsx then you should use:

class ABCD extends React.Component {
   render() {
      return (
         <div>
             <p>
                 {(() => {<div>Hello World </div>})()}
             </p>
         </div>
      );
   }
}

If you want to call a function from your jsx then you should use:

class ABCD extends React.Component {
   show() {
        return (<div>Hello World!</div>);
   }
   render() {
        return (
            <div>
                    <p>
                        {this.show()}
                    </p>
            </div>
        );
    }
}