DEV Community

loading...

Crear un crud simple con React

nahuelsegovia profile image Nahuel Segovia ・2 min read

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('');
Enter fullscreen mode Exit fullscreen mode

El tercer useState va a ser para guardar los datos de nombre y apellido en un mismo estado:

const [estado, setEstado] = useState([]);
Enter fullscreen mode Exit fullscreen mode

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]);
    }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Luego de esto le enviamos el estado 'estado' a otro componente para renderizarlo:

<RenderUser user={estado}/>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Podemos ver el resultado:

Alt Text

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;
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app