Crear un crud simple con React
Tags: react, javascript, noob
Published: 2021-02-25 21:22:16

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.

```javascript
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:

```javascript
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", 

```javascript
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:

```html
<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:

```javascript
<RenderUser user={estado}/>
```

Y de esta forma obtenemos los nombres y apellidos y los pintamos en pantalla en el componente RenderUser

```javascript
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:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ah3zgaac782cgzs5jrxd.png)

Déjo el código completo abajo:

```javascript
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;
```