I am using 3 custom hooks to simulate a DB but the problem is when I try to use more than one custom hook I have the useContext problem.
This is the hook useUsuario
import { useEffect, useState } from "react";
export const useUsuario = () => {
const [usuarios, setUsuario] = useState([]);
useEffect(() => {
setTimeout(() => {
setUsuario([
{
id: "1",
name: "Rubens Alarcón",
age: 22,
}
]);
}, 2500);
}, []);
return {usuarios};
};
This is the hook useLibros
import { useEffect, useState } from "react";
export const useLibros = () => {
const [libros, setLibros] = useState([]);
useEffect(() => {
setTimeout(() => {
setLibros([
{
id: "1",
name: "Viaje a las Estrellas",
image: ,
category: "Ciencia Ficción",
price: 25,
quantity: 10,
author: "Fernando G",
publicationYear: 2022
}
]);
}, 2500);
}, []);
return {libros};
};
This is useAlquier
import { useState } from "react";
export const useAlquiler = () => {
const [alquileres, setAlquileres] = useState([]);
const agregarAlquiler = (nuevoAlquiler) => {
setAlquileres([...alquileres, nuevoAlquiler]);
};
return { alquileres, agregarAlquiler };
};
In this moment this is my app.js
import './App.css';
import { useLibros } from "./hooks/useLibros";
import { LibroContext } from "./context/LibroContext";
import { Footer } from "./components/Footer";
import { GlobalRouter } from "./routes/GlobalRouter";
import { useUsuario } from "./hooks/useUsuario";
function App() {
const libros = useLibros();
const usuarios = useUsuario();
return (
<LibroContext.Provider value={{libros, usuarios}}>
<GlobalRouter />
<Footer />
</LibroContext.Provider>
);
}
export default App;
I try to do all in a Context but I fail. I use useLibros to simulate a DB of books so the user can see al the books, useAlquier to rent a book if he want and the useUsuario to present the information of the user in a page