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