hide div by selecting radio button "no" – reactjs

January 12, 2022

when selecting the radio button in "yes" it is activating the div, but what I have not been able to achieve is that if I activate the radio button "no" the div is hidden.

import { useState } from "react";

export default function Pruebas() {

  const [value2, setValue2] = useState("")

  return (
    <div>
<div className="col-sm-6">
                                      
                     <div className="form-check">
                       <input className="form-check-input" type="radio" name="radio1" value="no" checked onChange={e => setValue2(e.currentTarget.value)}   />
                       <label className="form-check-label">NO</label>
                       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                       <input className="form-check-input" type="radio"  value="si" name="radio1" 
                       onChange={e => setValue2(e.currentTarget.value)}  />
                       <label className="form-check-label">SI</label>
                     </div>
                                          
        </div>

        <div className="col-sm-7">
  { value2==='si' ? (<div className="card">

    <div className="card-body">
        <h1>DIV OK</h1>
             
    </div>
        
  </div>
  ):null}
  
  </div>

>Solution :

To make no as your initial radio checked value you can set default value in your useState.
add a checked property based on the state value.
you code will look like that

import { useState } from "react";

export default function Test() {
  const [value2, setValue2] = useState("no");

  return (
    <>
      <div className="col-sm-6">
        <div className="form-check">
          <input
            className="form-check-input"
            type="radio"
            name="radio1"
            value="no"
            checked={value2 === "no"}
            onChange={(e) => setValue2(e.currentTarget.value)}
          />
          <label className="form-check-label">NO</label>
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <input
            className="form-check-input"
            type="radio"
            value="si"
            name="radio1"
            checked={value2 === "si"}
            onChange={(e) => setValue2(e.currentTarget.value)}
          />
          <label className="form-check-label">SI</label>
        </div>
      </div>
      <div className="col-sm-7">
        {value2 === "si" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV OK</h1>
            </div>
          </div>
        )}
      </div>
    </>
  );
}