DEV Community

Nahuel Segovia
Nahuel Segovia

Posted on

4 1

Crear un crud simple con React

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

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up