0

Buen dia, estoy intentando que al darle al radio button donde dice "si" me active un div y al darle "no" lo desactive pero no he logrado hacerlo funcionar, he intentado agregarle una condición al div pero igual no me funciona, tambien agregue al radiobutton un onchange pero tampoco me funciona.

import React  from 'react'

function Pruebas() {

  const [value2, setValue2] = React.useState()

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

        <div class="col-sm-7">
  { value2==='radio1' ? (<div class="card">

    <div class="card-body">
        <h1>DIV ACTIVO</h1>
             
    </div>
        
  </div>
  ):null}
  
  </div> 
      
    </div>
  )
}

export default Pruebas

4
  • En value debes poner si en uno y no en otro. Cuando cambie le va a asignar ese value al estado y luego debes preguntar por si o por no para renderizar la card el 11 ene. 2022 a las 4:13
  • como debe quedar mi algoritmo ?
    – Giovanny
    el 11 ene. 2022 a las 12:04
  • Lo hice desde el movil y no lo pude probar. Cualquier cosa me dices. Te aconsejo que instales las react dev tools para tu browser, si es que no las tienes instaladas, con estas puedes chequear el estado de tus componentes y modificarlo directo en el browser, entre muchas otras cosas el 11 ene. 2022 a las 12:21
  • no me funciona al seleccionar el radio button "SI" no hace nada..
    – Giovanny
    el 11 ene. 2022 a las 12:26

1 respuesta 1

0

Como te dije no lo pude probar porque estaba con el movil, tenias un par de errores porque los class en jsx son className. El estado si cambia, si esta chequeado el no veras que el div no aparece y si le das al si se renderiza. El caso es que si vuelves a dar que no no se refresca. Debes usar useEffect para que cuando la variable de estado cambie se renderice el componente nuevamente. abajo te dejo un ejemplo de como se hace.

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 ACTIVO</h1>
             
    </div>
        
  </div>
  ):null}
  
  </div> 
      
    </div>
  )
}

este ejemplo hace arrancar y parar un reloj, fue mi tutorial de hooks

import { useState, useEffect } from "react";

function Reloj({ hora }) { //{ hora } es destructuracion de props
  return <h3>{hora}</h3>;
}

export default function RelojHooks() {
  const [hora, setHora] = useState(new Date().toLocaleTimeString());
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    console.log("Entro al effect");
    let temporizador;

    if (visible) {
      temporizador = setInterval(() => {
        setHora(new Date().toLocaleTimeString());
      }, 1000);
    } else {
      clearInterval(temporizador);
    }
    return () => {
      clearInterval(temporizador);
      console.log("Fase de desmontaje");
    };
  }, [visible]);

  return (
    <>
      <h2>Reloj con Hooks</h2>
      {visible && <Reloj hora={hora}/>}
      <button onClick={() => setVisible(true)}>Iniciar</button>
      <button onClick={() => setVisible(false)}>Detener</button>
    </>
  );
}

fijate en la funcion useEffect, cuando el estado cambia(visible) manda a renderizar nuevamente el reloj. Espero te sirva

Aqui tienes un ejemplo para ocultar y mostrar un texto

import { useState } from "react";

export default function Mostrar() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(true)}>Mostrar</button>
      <button onClick={() => setVisible(false)}>Ocultar</button>
      {visible && <h1>DIV ACTIVO</h1>}
    </>
  );
}
4
  • no me funciona al seleccionar el radio button "SI" no hace nada..
    – Giovanny
    el 11 ene. 2022 a las 12:56
  • funciona cuando selecciono el si pero al darle clic al radio button donde esta el "si" no esta quedando seleccionado toca darle dos veces al radio.
    – Giovanny
    el 11 ene. 2022 a las 20:18
  • te doy una pista, no deberias usar radio buttons para lo que quieres hacer, normalmente los radio buttons son parte de un formulario que toma el valor cuando se envia. el 11 ene. 2022 a las 20:49
  • pero lo que necesito es que al seleccionar un radio button me active un div.
    – Giovanny
    el 12 ene. 2022 a las 9:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.