JSX render method in react Following is the piece of code which is working fine, but somehow it looks bit odd to me to have a function inside a render method and using it in both conditions. Let me know how can I improve this react code as showContainer is only adding a wrapper to the function JSX.
Code -
render () {

  const childJsx = () =&gt; (&lt;&gt;&lt;h3&gt;Random Child JSX&lt;/h3&gt;&lt;/&gt;)

  return (
            &lt;&gt;
            { showContainer ?
             &lt;Modal&gt;
                {childJsx()}
             &lt;/Modal&gt;
             :
             &lt;div className=&quot;parent&quot;&gt;
                {childJsx()}
             &lt;/div&gt;
            } 
            &lt;/&gt;
        )

}
Your functionalmethod is fine, just the place You have defined is a bit anti pattern. (But well, if you really want to use that component in JUST in that scope its still fine.)
But let me try to refactor it in  a react way:
render () {

  return (
            &lt;&gt;
            {
              showContainer
                ? (
                  &lt;Modal&gt;
                    &lt;ChildJsx /&gt;
                  &lt;/Modal&gt;
                )
                : (
                  &lt;div className=&quot;parent&quot;&gt;
                    &lt;ChildJsx /&gt;
                  &lt;/div&gt;
                )
            } 
            &lt;/&gt;
        )
}

function ChildJsx(props){
  return (
    &lt;&gt;
      &lt;h3&gt;Random Child JSX&lt;/h3&gt;
    &lt;/&gt;
  )
}

React is about reusability. In this case you can use that small component again and again as many as you want.