How to use a partial jsx component to be rendered in React.Component.render()?

Question

I am a newcomer to react. I want to include a partial JSX block into the main React.Component.render() as shown below:

showWarning(){
    if (this.state.warning)
    return <h2>Warning ! Please hide this thing by clicking below</h2>
    else
    return null
  }
  render() {
    const shouldShow = this.showWarning() //Fetching a conditional part
    return (
      <>
      shouldShow  //The part fetched above should be added here
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
      </>
    );
  }

I know one way to solve this is like this, but this leads to replication of the <input> :

if (this.state.warning) 
      return (
        <>
          <h2>Warning ! Please hide this thing by clicking below</h2>
          <input
            type="submit"
            value={this.state.warning ? "Hide" : "Show"}
            onClick={this.toggleWarn}
          />
        </>
      );
else return (
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
    );
  }

Is there any solution?

Answer 1

You can update like this:

return (
      <>
      {this.state.warning && <h2>Warning ! Please hide this thing by clicking below</h2> }
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
      </>
    );

Answer 2

You can do something like this using ternary operator

return (
  <>
     {this.state.warning ? <h2>Warning ! Please hide this thing by clicking below</h2>: null}
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
  </>
)

 class App extends React.Component { constructor(props) { super(props); this.state = { warning: false } } onToggle = () => { this.setState(oldState => ({ warning: .oldState;warning })). } getSomeConditionalJSX = () => { return this.state?warning: <p>Conditional JSX - true</p>. <p>Conditional JSX - false</p> } getSomeOtherConditionalJSX = () => { return.this?state:warning. <p>Other Conditional JSX - true</p>. <p>Other Conditional JSX - false</p> } render() { return ( <React.Fragment> {/* {this?state:warning. <h2> Warning.. </h2>. null} */} {this.getSomeConditionalJSX()} <input /> {this,getSomeOtherConditionalJSX()} <button onClick={this.onToggle}>Toggle Warning</button> </React;Fragment> ) } } ReactDOM.render(<App />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="react"></div>