CIDWA/premiaciones_front
12
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

guardado de datos en login, implementacion map en invitados

Browse Source
This commit is contained in:
Gabriela Gómez Hernández
2022-05-04 13:47:07 -05:00
parent 3e3deeaeaf
commit 544827ee08
4 changed files with 832 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/login/login.js
+88 -59
View File
@@ -3,13 +3,60 @@ import "bootstrap/dist/css/bootstrap.min.css";
import {Container,Row,Col,Form,Button,InputGroup,FormControl} from "react-bootstrap"
import {FormGroup, Label, Input} from "reactstrap";
import styles from "../../styles/login.module.css";
import axios from 'axios';
function App() {
const[radio, setRadio] = useState("");
const[radio, setRadio] = useState("profesor");
const[profesor,setProfesor]=useState('')
const[adscripcion,setAdscripcion]=useState('')
const[correo,setCorreo]=useState('')
const[contraseña,setContrasena]=useState('')
const cambioRadio=e=>{
setRadio(e.target.value);
}
const cambioRadio=e=>{
setRadio(e.target.value);
}
const cambioProfesor=e=>{
setProfesor(e.target.value);
console.log(profesor)
}
const cambioCorreo=e=>{
setCorreo(e.target.value);
console.log(correo)
}
const cambioContrasena=e=>{
setContrasena(e.target.value);
console.log(contraseña)
}
const cambioAdscripcion=e=>{
setAdscripcion(e.target.value);
console.log(adscripcion)
}
function handleProfesor(){
/* axios.get(baseUrl,{params:{profesor,adscripcion}})
.then(response=>{
return response.data;
})
.catch(error=>{
console.log(error);
})*/
}
function handleOperador(){
/*axios.get(baseUrl,{params:{correo: correo,contrasena: contraseña}})
.then(response=>{
return response.data;
})
.catch(error=>{
console.log(error);
})*/
}
function handleAdmin(){
/*axios.get(baseUrl,{params:{correo: correo,contrasena: contraseña}})
.then(response=>{
return response.data;
})
.catch(error=>{
console.log(error);
})*/
}
return (
<Container className={`${styles.contenido}`}>
<Row className="justify-content-md-center">
@@ -63,45 +110,57 @@ function App() {
<Col xs lg="4">
{(() => {
switch (radio) {
case "profesor": return <>
<InputGroup className="mb-3">
<FormControl
placeholder="Número de trabajador"
aria-label="profesor"
aria-describedby="basic-addon1"
/>
</InputGroup>
<Form.Select aria-label="Default select example">
<option>Adscripción</option>
<option value="1">Programa de Matemáticas aplicadas y Computación</option>
<option value="2">Programa de Actuaría</option>
<option value="3">Programa de Ingeniería Civil</option>
</Form.Select>
case "profesor": return <>
<Form action="./profesores">
<InputGroup className="mb-3">
<FormControl
required
onChange={cambioProfesor}
placeholder="Número de trabajador"
aria-label="profesor"
aria-describedby="basic-addon1"
/>
</InputGroup>
<Form.Select onChange={cambioAdscripcion}>
<option >Programa de Matemáticas aplicadas y Computación</option>
<option >Programa de Ingeniería Civil</option>
<option >Programa de Actuaría</option>
</Form.Select>
<p className="text-center">
<Button type="submit" onClick={handleProfesor} className={`${styles.ingresar}`} size="lg">Ingresar</Button>
</p>
</Form>
</>
;
case "operador": return <>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Control type="email" placeholder="Correo" />
<Form action="./operador">
<Form.Group onChange={cambioCorreo} className="mb-3" controlId="formBasicEmail">
<Form.Control required type="email" placeholder="Correo" />
<Form.Text className="text-muted">
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Control type="password" placeholder="Contraseña" />
<Form.Group onChange={cambioContrasena} className="mb-3" controlId="formBasicPassword">
<Form.Control required type="password" placeholder="Contraseña" />
</Form.Group>
<p className="text-center">
<Button type="submit" onClick={handleOperador} className={`${styles.ingresar}`} size="lg">Ingresar</Button>
</p>
</Form>
</>
;
case "admin": return <>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Control type="email" placeholder="Correo" />
<Form action="./admin">
<Form.Group onChange={cambioCorreo} className="mb-3" controlId="formBasicEmail">
<Form.Control required type="email" placeholder="Correo" />
<Form.Text className="text-muted">
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Control type="password" placeholder="Contraseña" />
<Form.Group onChange={cambioContrasena} className="mb-3" controlId="formBasicPassword">
<Form.Control required type="password" placeholder="Contraseña" />
</Form.Group>
<p className="text-center">
<Button type="submit" onClick={handleAdmin} className={`${styles.ingresar}`} size="lg">Ingresar</Button>
</p>
</Form>
</>
;
@@ -110,36 +169,6 @@ function App() {
</Col>
</Row>
<br />
<Row className="justify-content-md-center">
<Col>
{(() => {
if(radio==="profesor")
return(
<p className="text-center">
<a href="./profesores">
<Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
</a>
</p>
)
else if(radio==="operador")
return(
<p className="text-center">
<a href="./operador">
<Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
</a>
</p>
)
else if(radio==="admin")
return(
<p className="text-center">
<a href="./admin">
<Button className={`${styles.ingresar}`} size="lg">Ingresar</Button>
</a>
</p>
)
})()}
</Col>
</Row>
</Container>
);
}
components/profesores_registro/invited.js
+48 -649
View File
@@ -1,14 +1,14 @@
import styles from "../../styles/profesores.module.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, Row, Col,InputGroup,FormControl,Button,Form,Stack} from "react-bootstrap";
import InputNumber from 'react-input-number';
import { Container, Row, Col,Button,Form,Stack} from "react-bootstrap";
import React,{useState} from 'react';
export default function Invited(){
const[select,setSelect]=useState("0");
const[edad,setEdad]=useState("18");
const [invitados,setInvitados]=useState([]);
return(
<div>
<Container>
@@ -31,7 +31,7 @@ export default function Invited(){
<Container>
<div className="row justify-content-start">
<div className="col-2">
<Form.Select as="select" size="lg" onChange={(e)=>{setSelect(e.target.value)}} defaultValue="0">
<Form.Select as="select" onChange={(e)=>{setSelect(e.target.value)}} defaultValue="0">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
@@ -39,656 +39,55 @@ export default function Invited(){
</Form.Select>
</div>
</div>
</Container>
</Container>
</form>
</Col>
</Row>
</Container>
{(() => {
switch(select){
case "1": return (
<Form action="./registro-exitoso">
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 1</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
</Stack>
<Stack gap={1} className="col-md-2 mx-auto">
<Form.Group className={`${styles.edad}`}>
<Form.Label>Edad: </Form.Label>
<Form.Select as="edad" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</Form.Select>
</Form.Group>
</Stack>
</Container>
<Container><Stack className="col-md-2 mx-auto">
<Button className={`${styles.boton2}`} type="submit"> Registrar</Button>
</Stack></Container>
</Form>
);
case "2": return (
<Form action="./registro-exitoso">
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 1</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
</Stack>
<Stack className="col-md-2 mx-auto">
<Form.Group className={`${styles.edad}`}>
<Form.Label>Edad: </Form.Label>
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</Form.Select>
</Form.Group>
</Stack>
</Container>
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 2</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
</Stack>
<Stack className="col-md-2 mx-auto">
<Form.Group className={`${styles.edad}`}>
<Form.Label>Edad: </Form.Label>
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</Form.Select>
</Form.Group>
</Stack>
</Container>
<Container><Stack gap={1} className="col-md-2 mx-auto">
<Button className={`${styles.boton2}`} type="submit"> Registrar</Button>
</Stack></Container>
</Form>
);
case "3": return (
<Form action="./registro-exitoso">
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 1</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required />
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
</Stack>
<Stack className="col-md-2 mx-auto">
<Form.Group className={`${styles.edad}`}>
<Form.Label>Edad: </Form.Label>
<Form.Select as="edad" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</Form.Select>
</Form.Group>
</Stack>
</Container>
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 2</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
</Stack>
<Stack className="col-md-2 mx-auto">
<Form.Group className={`${styles.edad}`}>
<Form.Label>Edad: </Form.Label>
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</Form.Select>
</Form.Group>
</Stack>
</Container>
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO 3</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
</Stack>
<Stack className="col-md-2 mx-auto">
<Form.Group className={`${styles.edad}`}>
<Form.Label>Edad: </Form.Label>
<Form.Select as="edad" size="lg" defaultValue="18" onChange={(e)=>{setEdad(e.target.value)}} >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</Form.Select>
</Form.Group>
</Stack>
</Container>
<Container><Stack gap={1} className="col-md-2 mx-auto">
<Button className={`${styles.boton2}`} type="submit">Registrar</Button>
</Stack></Container>
</Form>
);
}
console.log(select)
invitados.length=0
for(let i=0;i<select;i+=1){
invitados.push({
nombres:'',
apellidos:'',
edad:18
})
}
console.log(invitados)
})()}
</Container>
<Form action="./registro-exitoso">
{invitados.map((invitado,index)=>(
<Container key={index}>
<Container className={`${styles.invitado}`}>
<Stack className="col-md-6 mx-auto">
<div className={`${styles.texto2}`}><p className="text-center">INVITADO {index+1}</p></div>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Nombre(s): </Form.Label>
<Form.Control type="text" required
onChange={(e)=>{
console.log(e.target.value)
console.log('indice: '+index)
}}>
</Form.Control>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Apellidos: </Form.Label>
<Form.Control type="text" required/>
</Form.Group>
<Form.Group>
<Form.Label>Edad : </Form.Label>
<InputNumber min={18} max={100} />
</Form.Group>
</Stack>
</Container>
</Container>
))}
<Container><Stack className="col-md-2 mx-auto">
<Button className={`${styles.boton2}`} type="submit"> Registrar</Button>
</Stack></Container>
</Form>
</Container>
</div>
);
}
package-lock.json
Generated
+695 -30
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -17,6 +17,7 @@
"react": "18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "18.0.0",
"react-input-number": "^5.0.19",
"react-qr-reader": "^3.0.0-beta-1",
"react-router-dom": "^6.3.0",
"reactstrap": "^9.0.2",