How to Show div when a Radio Button is Clicked in React

Question

I have two radios buttons but I want one to show another div if the user clicks yes. I'm new in React. I have tried this code but the second does not hide the content of the first.

Break down The user clicks yes, Another div opens for more info. The user clicks no, The div that opened earlier closed. I know how to toggle in JavaScript but I want to update based on the state.

    import React, { Component } from "react";
    class Radio extends Component {
      constructor(props) {
        super(props);
        this.state = { clickedYes: false, clickedNo: false };
        this.yesHandler = this.yesHandler.bind(this);
        this.noHandler = this.noHandler.bind(this);
      }
      yesHandler() {
        this.setState({
          clickedYes: !this.state.clickedYes
        });
      }
      noHandler() {
        this.setState({
          clickedNo: !this.state.clickedNo
        });
      }
      render() {
        const radioNo = this.state.clickedNo ?
        //  Hide div when true 
         : null;

        const radioYes = this.state.clickedYes ? <h1>Yes</h1> : null;

        return (
          <>
            <input
              type="radio"
              name="release"
              id=""
              clickedYes={this.state.clickedYes}
              onClick={this.yesHandler}
             />
            <input
              type="radio"
              name="release"
              clickedNo={this.state.clickedNo}
              onClick={this.noHandler}
              id=""
            />

            {radioYes}
            {radioNo}
          </>
        );
       }
     }
     export default Radio;

Answer 1

@bgaynor78 is right, but I would prefer something like the following, because you will not create an invisible dom node

{
  this.state.clickedYes && (<div>This shows when the radioYes input is clicked</div>)
}

Answer 2

Here are two solutions.

With Standrad React

import React, { Component } from "react";

class Radio extends Component {
  constructor(props) {
    super(props);
    this.state = { status: 0 }; // 0: no show, 1: show yes, 2: show no.
  }

  radioHandler = (status) => {
    this.setState({ status });
  };

  render() {
    const { status } = this.state;

    return (
      <>
        <input type="radio" name="release" checked={status === 1} onClick={(e) => this.radioHandler(1)} />
        <input type="radio" name="release" checked={status === 2} onClick={(e) => this.radioHandler(2)} />
        {status === 1 && drawYesContent()}
        {status === 2 && drawNoContent()}
      </>
    );
  }
}

export default Radio;

With React Hook

import React from "react";

function Radio () {
  const [status, setStatus] = React.useState(0) // 0: no show, 1: show yes, 2: show no.

  const radioHandler = (status) => {
    setStatus(status);
  };

  return (
    <>
      <input type="radio" name="release" checked={status === 1} onClick={(e) => radioHandler(1)} />
      <input type="radio" name="release" checked={status === 2} onClick={(e) => radioHandler(2)} />
      {status === 1 && drawYesContent()}
      {status === 2 && drawNoContent()}
    </>
  );
}

export default Radio;

Answer 3

You could just simply add a style declaration to your div you want to show, then just hook that up to your state object.

  <div style={{ display: this.state.clickedYes ? 'block' : 'none'}}>This shows when the radioYes input is clicked</div>