I'm trying to add AOS library to react. My code is like this now which is giving me an error that init
is undefined:
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Menubar from './Components/Menubar/Menubar';
import Products from './Components/Products/Products';
import { useEffect, useState } from 'react';
import 'aos/dist/aos.css'
import { AOS } from 'aos';
function App() {
const [product, setProduct]= useState([]);
useEffect(()=>{
fetch('https://fakestoreapi.com/products')
.then(Response=>Response.json())
.then(data=>setProduct(data))
},[]);
AOS.init();
const [count, setCount]= useState(0);
return (
<div>
<Menubar count={count}></Menubar>
<Products count={count} setCount={setCount} product={product}></Products>
</div>
);
}
export default App;
And when i Try to use the AOS.init()
with hook i get Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Menubar from './Components/Menubar/Menubar';
import Products from './Components/Products/Products';
import { useEffect, useState } from 'react';
import 'aos/dist/aos.css'
import { AOS } from 'aos';
function App() {
const [product, setProduct]= useState([]);
useEffect(()=>{
fetch('https://fakestoreapi.com/products')
.then(Response=>Response.json())
.then(data=>setProduct(data))
},[]);
useEffect(()=>{
AOS.init();
},[])
const [count, setCount]= useState(0);
return (
<div>
<Menubar count={count}></Menubar>
<Products count={count} setCount={setCount} product={product}></Products>
</div>
);
}
export default App;
Instead of :
import { AOS } from "aos";
Try this :
import AOS from "aos";