Animated & Dynamically Rendered Expenses Chart with CSS GRID

Community feedback

• 

  Arseniy AI•170

  @ArseniyX

  Posted over 2 years ago

  Hello, looked around your solution, looks not bad, things to improve:

  1. use prettier and es-lint to make the code looks better.
  2. if you use animation library like framer-motion you shouldn't do setTimeout to animation its supposed to be build in with the library you just need to find the right way to do it.
  3. you not use full potential of react, you need to split big files to small components
  4. This function:

  const findHigh = () => {
        let max = 0, indx = 0;
        data.map((item)=>{
          return item.amount
        }).forEach((item, index)=>{
          if(item > max) {
              max = item 
              indx = index
          }
        })
        return indx       
      }
  

  can be called findHighIndex and you can achieve that with:

  const myArray = [5,6,7,2,8,0]
  const result = myArray.indexOf(Math.max(...myArray));
  console.log(result)
  

  13

  Marked as helpful