import React, { useState, useEffect } from 'react';

import { useForm } from 'react-hook-form';

import axios from 'axios';

const App = () => {

const [data, setData] = useState([]);
const { register, handleSubmit, reset } = useForm();

const fetchData = async () => {

try {
const response = await
axios.get('https://jsonplaceholder.typicode.com/users');
setData(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
};

useEffect(() => {
fetchData();
}, []);

const onSubmit = async (formData) => {

try {
await axios.post('https://jsonplaceholder.typicode.com/users', formData);
fetchData();
reset();
} catch (error) {
console.error('Error adding data:', error);
}
};

return (
<div>
<h1>CRUD Básico en React</h1>
<h2>Lista de Usuarios</h2>
<ul>
{data.map((user) => (
<li key={user.id}>
{user.name} - {user.email}
</li>
))}
</ul>
<h2>Agregar Usuario</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Nombre:</label>
<input type="text" {...register('name')} required />
</div>
<div>
<label>Correo Electrónico:</label>
<input type="email" {...register('email')} required />
</div>
<button type="submit">Guardar</button>
</form>
</div>
);
};
export default App;