Hola, en ese post cortito vengo a mostrar como crear un crud simple con react.
Para poder hacerlo tenemos que tener nociones básicas de javascript y también de los hooks de React.
Lo primero que vamos a hacer es usar useState en dos ocasiones para poder guardar los datos obtenidos del formulario.
const [nombre, setNombre] = useState('');
const [apellido, setApellido] = useState('');
El tercer useState va a ser para guardar los datos de nombre y apellido en un mismo estado:
const [estado, setEstado] = useState([]);
Ahora vamos a crear una función que nos va a meter los datos de nombre y apellido adentro del estado "estado",
function addUser(e){
e.preventDefault();
let usuario = {
nombre: nombre,
apellido: apellido
}
setEstado([...estado, usuario]);
}
Casi se me olvida el formulario desde donde vamos a obtener estos datos:
<form action="" onSubmit={(e) => addUser(e)}>
<input onChange={(e) => setNombre(e.target.value)} type="text" id="nombre" name="nombre"/>
<input onChange={(e) => setApellido(e.target.value)} type="text" id="apellido" name="apellido"/>
<button>Registrarme</button>
</form>
Luego de esto le enviamos el estado 'estado' a otro componente para renderizarlo:
<RenderUser user={estado}/>
Y de esta forma obtenemos los nombres y apellidos y los pintamos en pantalla en el componente RenderUser
import React, { Fragment } from 'react';
function RenderUser({user}){
return(
<Fragment>
{
user.map((user, index) => {
return <div className="">
<h1 key={index}>Este es tu nombre: "{user.nombre}" y este tu apellido: "{user.apellido}"</h1>
</div>
})
}
</Fragment>
)
}
export default RenderUser;
Podemos ver el resultado:
Déjo el código completo abajo:
import React, { Fragment, useState } from 'react';
import RenderUser from './RenderUser'
function Registro(props){
const [nombre, setNombre] = useState('');
const [apellido, setApellido] = useState('');
const [estado, setEstado] = useState([]);
function addUser(e){
e.preventDefault();
let usuario = {
nombre: nombre,
apellido: apellido
}
setEstado([...estado, usuario]);
}
return(
<Fragment>
<form action="" onSubmit={(e) => addUser(e)}>
<input onChange={(e) => setNombre(e.target.value)} type="text" id="nombre" name="nombre"/>
<input onChange={(e) => setApellido(e.target.value)} type="text" id="apellido" name="apellido"/>
<button>Registrarme</button>
</form>
<RenderUser user={estado}/>
</Fragment>
)
}
export default Registro;
Top comments (0)