1
respuesta

Siempre se renderiza mi formulario

Referente al curso React: desarrollando con JavaScript, en el capítulo Registro de colaboradores y actividad Mostrar ocultar formulario

por Marco Antonio Chávez López
| 127.8k xp | 2 posts
Docente de física

Hice paso a paso como el instructor pero aunque haga click en el componente MiOrg el formulario siemrpre se renderiza, me pueden ayudar?! Les dejo mi código ya que por algún motivo no puedo subir la imagenes

import { useState } from 'react'; import './App.css'; import Header from './components/Header/Header'; import Formulario from './components/Formulario/Formulario'; import MiOrg from './components/MiOrg';

function App() {

const [mostrarFormulario,actualizarMostrar] = useState(true) //Ternario --> condicion ? seMuestra : noSeMuestra

return ( 

  <Header />
  {mostrarFormulario === true ? <Formulario /> : <div></div>}
  <MiOrg />
</div>

); }

export default App;

index.js

import { useState } from "react" import "./MiOrg.css" const MiOrg = () =>{

const [Mostrar, actualizarMostrar] = useState(true)
const manejarclick = () =>{
    console.log("Mostrar/Ocultar elemento", !Mostrar)
    actualizarMostrar(!Mostrar)
}


return <section className="orgSection">
    <h3 className="title">Mi Organización</h3>
    <img src="/img/add.png" alt="add" onClick={manejarclick}/>

</section>

}

export default MiOrg

1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Marco!

Gracias por compartir tu código y explicar tu problema. Parece que estás teniendo dificultades para mostrar u ocultar el formulario en función de un clic en el componente MiOrg.

En tu código, veo que estás utilizando el estado mostrarFormulario en el componente App para controlar si se muestra o no el formulario. Sin embargo, no veo que estés pasando ninguna función para actualizar ese estado al componente MiOrg.

Para solucionar este problema, necesitarás pasar la función actualizarMostrar como una prop al componente MiOrg. Luego, en el componente MiOrg, puedes llamar a esa función cuando se haga clic en la imagen. Aquí hay un ejemplo de cómo puedes hacerlo:

// En el componente App
<MiOrg actualizarMostrar={actualizarMostrar} />

// En el componente MiOrg
const MiOrg = ({ actualizarMostrar }) => {
  const manejarClick = () => {
    actualizarMostrar(!mostrarFormulario);
  };

  return (
    <section className="orgSection">
      <h3 className="title">Mi Organización</h3>
      <img src="/img/add.png" alt="add" onClick={manejarClick} />
    </section>
  );
};

Al hacer esto, cuando hagas clic en la imagen en el componente MiOrg, se llamará a la función manejarClick, que a su vez llamará a la función actualizarMostrar en el componente App para actualizar el estado mostrarFormulario.

Espero que esto resuelva tu problema. Si tienes alguna otra pregunta, ¡no dudes en preguntar! ¡Buena suerte con tu proyecto de React!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)