Gabriela Gómez Hernández
199 lines
10 KiB
JavaScript
199 lines
10 KiB
JavaScript
import styles from "../../styles/invitado.module.css";
|
|
import { Container, Row, Col,InputGroup,FormControl,Button} from "react-bootstrap";
|
|
import { useInvitado } from "./useInvitado";
|
|
|
|
const initialForm= {
|
|
nombre:"",
|
|
apellidos:"",
|
|
edad:18
|
|
}
|
|
const validationsForm=(form) =>{
|
|
let errors={};
|
|
|
|
if(!form.nombre.trim()){
|
|
errors.nombre="El campo 'Nombre' es requerido"
|
|
}
|
|
if(!form.apellidos.trim()){
|
|
errors.apellidos="El campo 'Apellidos' es requerido"
|
|
}
|
|
|
|
return errors
|
|
}
|
|
|
|
|
|
function Invitado(props){
|
|
|
|
const {
|
|
form,
|
|
errors,
|
|
loading,
|
|
response,
|
|
handleChange,
|
|
handleBlur,
|
|
handleSubmit}
|
|
= useInvitado (initialForm,validationsForm);
|
|
|
|
|
|
return(
|
|
<Container>
|
|
<form onSubmit={handleSubmit} >
|
|
<div className={`${styles.container}`}>
|
|
<Row className="justify-content-md-center">
|
|
<Col xs={3}>
|
|
<p className="text-center">INVITADO {props.numero}</p>
|
|
</Col></Row>
|
|
<Row>
|
|
<Col xs={5}>
|
|
<p className="text-end">Nombre(s):</p>
|
|
<p className="text-end">Apellidos:</p>
|
|
<p className="text-end">Edad:</p>
|
|
</Col>
|
|
<Col xs={4}>
|
|
<InputGroup className="mb-3">
|
|
<FormControl
|
|
placeholder="Nombre"
|
|
aria-label="nombre"
|
|
aria-describedby="basic-addon2"
|
|
name="nombre"
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={form.nombre}
|
|
required
|
|
/>
|
|
</InputGroup>
|
|
<InputGroup className="mb-3">
|
|
<FormControl
|
|
placeholder="Apellidos"
|
|
aria-label="apellidos"
|
|
aria-describedby="basic-addon2"
|
|
name="apellidos"
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={form.apellidos}
|
|
required
|
|
/>
|
|
</InputGroup>
|
|
<InputGroup className="mb-3">
|
|
<Container
|
|
name="edad"
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={form.edad}
|
|
required
|
|
>
|
|
<div className="row justify-content-start">
|
|
<div className="col-4">
|
|
<div className="input-group mb-3 ">
|
|
<select class="form-select" id="inputGroupSelect02">
|
|
<option selected 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>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</InputGroup>
|
|
|
|
{errors.nombre && <p style={styles}>{errors.nombre}</p>}
|
|
{errors.apellidos && <p style={styles}>{errors.apellidos}</p>}
|
|
</Col>
|
|
</Row>
|
|
|
|
</div>
|
|
</form>
|
|
</Container>
|
|
)
|
|
}
|
|
export default Invitado;
|
|
|
|
/*
|
|
<Row className="justify-content-md-center">
|
|
<Col xs={1}>
|
|
<Button variant="primary" type="submit" className={`${styles.boton}`}>
|
|
Registrar
|
|
</Button>
|
|
</Col>
|
|
</Row>*/
|
|
|