Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

El botón formulario no me funciona...

Hola! el botón formulario no funciona, no hace nada, arregle todo según el video, no arroja error, solo, no muestra el formulario y no se cual de todos los index.js o formulario.js, o app,js debo revisar, me perdí!!!

index.js lista opciones código:

ListaOpciones = (props) => {
        //Metodo map -> arreglo.map( (equipo, index) ) => {
        //  return <option> </option>
        // )}  

      
       const manejarCambio = (e) => {
        console.log("cambio", e.target.value)
        props.actualizarEquipo(e.target.value)
       }



      return <div className="lista-opciones">
        <label>Equipos</label>
        <select value={props.valor} onChange={manejarCambio}> 
        <option value = "" disabled defaultValue=""hidden >Seleccionar equipo </option> 
        {props.equipos.map( (equipo, index) =><option key ={index} value={equipo}>{equipo}</option>)}
      
        </select>
      </div>
}

export default ListaOpciones

codigo app.js:

import { useState } from 'react';
import './App.css';
import Header from "./componentes/header/header.js";
import Formulario from './componentes/formulario/Formulario.js';
import MiOrg from './componentes/MiOrg';
import Equipo from './componentes/Equipo';

function App() {
const [mostrarFormulario, actualizarMostrar] = useState(false)

//Ternario --> condicion ? seMuestra : noseMuestra
//condicion && seMuestra : noSeMuestra

const cambiarMostrar = () => {
  actualizarMostrar(!mostrarFormulario)
}

//Lista de equipos

const equipos = [
{
  titulo:"Programación",
  colorPrimario: "#57C278",
  colorSecundario: "#D9F7E9"
},

{
  titulo:"Front End",
  colorPrimario: "#82CFFA",
  colorSecundario: "#E8F8FF"
},

{
  titulo:"Data Science",
  colorPrimario: "#A6D157",
  colorSecundario: "#F0F8E2"
},

{
  titulo:"Devop",
  colorPrimario: "#E06B69",
  colorSecundario: "#FDE7E8"
},

{
  titulo:"Ux y Diseño",
  colorPrimario: "#DB6EBF",
  colorSecundario: "#FAE9F5"
},

{
  titulo:"Movil",
  colorPrimario: "#FFBA05",
  colorSecundario: "#FFF5D9"
},

{
  titulo:"Innovación y Gestión",
  colorPrimario: "#FF8A29",
  colorSecundario: "#FFEEDF"
}

]

  return (
    <div>
    <Header />
    {/* {mostrarFormulario ? <Formulario /> : <></>} */}
    {mostrarFormulario && <Formulario equipos={equipos.map((equipo) => equipo.titulo) } />}
    <MiOrg cambiarMostrar = {cambiarMostrar} />

    { 
      equipos.map( (equipo) =><Equipo datos = {equipo} key= {equipo.titulo} />)
    }
    </div>
  );
}

export default App;

codigo formulario.js

import { useState } from "react"
import "./Formulario.css"
import CampoTexto from "../CampoTexto"
import ListaOpciones from "../ListaOpciones"
import Boton from "../Boton"

const Formulario =  (props)  => {

    const [nombre, actualizarNombre] = useState("")
    const [puesto, actualizarPuesto] = useState("")
    const [foto, actualizarFoto] = useState("")
    const [equipo, actualizarEquipo] = useState("")

    const manejarEnvio = (evento) => {
        evento.preventDefault()
        console.log("Manejar el envio")
        let datosAEnviar = {
            nombre,
            puesto,
            foto,
            equipo
        }
        console.log(datosAEnviar)
    }

    return <section className="formulario">
        <form onSubmit={manejarEnvio}>
        <h2>Rellena el formulario para crear el colaborador.</h2>
        <CampoTexto 
        titulo="Nombre" 
        placeholder="Ingresar nombre" 
        required 
        valor={nombre} 
        actualizarValor = {actualizarNombre} 
        />
        <CampoTexto 
        titulo="Puesto" 
        placeholder="Ingresar puesto" 
        required
        valor= {puesto} 
        actualizarValor = {actualizarPuesto} 
        />
        <CampoTexto 
        titulo="Foto" 
        placeholder="Ingresar enlace de foto" 
        required 
        valor = {foto}
        actualizarValor = {actualizarFoto}
        />

        <ListaOpciones 
        valor = {equipo}  
        actualizarEquipo={actualizarEquipo} 
        equipos={props.equipos} 
        />
        <Boton>
         Crear
        </Boton>
        </form>
    </section>
  }

export default Formulario

código index Equipo

import "./Equipo.css"

const Equipo = (props) => {
//Destructuracion
const { colorPrimario, colorSecundario, titulo } = props.datos

    const obj = {
       backgroundColor: colorSecundario
    }

    const estiloTitulo = { borderColor: colorPrimario }

    return  <section className="equipo" style={ obj }>
        <h3 style={ estiloTitulo }> {titulo} </h3>
        <div className="colaboradores">

        </div>

    </section>
}

export default Equipo

su ayuda por favor

1 respuesta

¡Hola Rodrigo!

Entiendo que estás teniendo problemas con el botón del formulario en tu aplicación de React. Parece que el problema puede estar relacionado con el envío de datos a través de las props. En el archivo app.js, estás enviando los equipos al componente Formulario, pero luego en el componente Formulario, estás utilizando la lista de equipos sin pasarla como prop.

Puedes solucionar esto enviando la lista de equipos al componente ListaOpciones dentro del componente Formulario. En el archivo Formulario.js, asegúrate de pasar los equipos como prop al componente ListaOpciones. Algo así:

<ListaOpciones valor={equipo} actualizarEquipo={actualizarEquipo} equipos={props.equipos} />

De esta manera, el componente ListaOpciones tendrá acceso a la lista de equipos y debería funcionar correctamente.

Espero que esta solución te ayude a solucionar el problema con el botón del formulario. ¡Buena suerte!

Espero haber ayudado y buenos estudios!

Saludos,

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