0

tengo dos botones uno se llama "si" y el otro "no" y necesito que al darle clic en "si" me abra un div que su condición sea "si" se ejecute y lo mismo con el botón de "no", y si por ejemplo le doy clic al boton "si" me debe ocultar el div de "no" si llegara a estar abierto y lo mismo con el boton "no", tengo mi algoritmo pero no he logrado que funcione.

import React,{useState} from 'react'

function Pruebas3() {

  const [value2, setValue2] = useState("");
  
  return (
    <div>
        <div className="col-sm-6">
        <div className="form-check">

        <input
            type="button"
            name="boton1"
            value="no"           
            onChange={(e) => setValue2(e.currentTarget.value) && value2 === "no"}
  /> 
        
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
  <input
            type="button"
            name="boton1"
            value="si"           
            onChange={(e) => setValue2(e.currentTarget.value) && value2 === "si"}
  /> 
        </div>
      </div>

      <div className="col-sm-7">
        {value2 === "si" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV si</h1>
            </div>
          </div>
        )}
      </div>


      <div className="col-sm-7">
        {value2 === "no" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV no</h1>
            </div>
          </div>
        )}
      </div>
      
    </div>
  )
}

export default Pruebas3

1 respuesta 1

1

Te dejo el codigo con algunos retoques:

import React,{useState} from 'react'

function Pruebas3() {

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

  const handlerOnClick = (e) => {
    // console.log(e.target.value) // si || no
    setValue2(e.target.value)
  }
  
  return (
    <div>
        <div className="col-sm-6">
        <div className="form-check">

        <input
            type="button"
            name="boton1"
            value="no"           
            onClick={handlerOnClick}
        /> 
        
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
          <input
            type="button"
            name="boton1"
            value="si"           
            onClick={handlerOnClick}
          /> 
        </div>
      </div>

      <div className="col-sm-7">
        {value2 === "si" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV si</h1>
            </div>
          </div>
        )}
      </div>


      <div className="col-sm-7">
        {value2 === "no" && (
          <div className="card">
            <div className="card-body">
              <h1>DIV no</h1>
            </div>
          </div>
        )}
      </div>
      
    </div>
  )
}

export default Pruebas3

Cree una funcion handlerOnClick que por parametro se le pasa un objeto de tipo event y dentro está el target (elemento del HTML al que se 'clickeó'). Luego utilizo setValue2 para meter el valor del elemento HTML, en este caso es el input. Depende si le das click a uno u otro te da los diferentes values que le pongas por atributo.

Tu Respuesta

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

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