React problem with context and custom hooks

49 views Asked by At

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.

Error

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

0

There are 0 answers