CODEWITHSUNDEEP
javascriptreactjsreact-component
Vinay
Vinay

Reputation: 17

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

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 ?

Upvotes: 0

Views: 711

Answers (2)

Nithish
Nithish

Reputation: 6049

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>

Upvotes: 1

Viet
Viet

Reputation: 12807

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}
      />
      </>
    );

Upvotes: 1

Related Questions