Create un crud simple con React

Hola, en ese post cortito vengo a mostrar como crear un crud simple con react.

Para poder 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 completeto 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;