Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

61
Views
Add AOS library to react

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;
7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

Instead of : import { AOS } from "aos";

Try this : import AOS from "aos";

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs