Expenses Chart Component (React + Tailwindcss + Vite)

Community feedback

• 

  FunkyCreep•130

  @francoisbilletPosted over 1 year ago

  Hi, thank you for your feedback. 1/ We don't need to "import React from 'react'" anymore with React 17+. 2/ The path to data.json works fine since this file is at the root of the project (2 levels down so ../../data.json). 3/ Good point, thank you ! I changed index key to spending.day. 4/ If I remove * 2.5 I will have very small boxes that won't match the design's. On smaller device it's the width that changes, not the height. Have a good day :)

  0
• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge!

  There are no syntax errors in the given code, however, there are few problems needs to be fixed:

  1.There is no "import" statement for the "React" library, which is needed for creating React components. Add this line at the beginning of the code: import React from 'react';

  2.The path for importing the "data.json" file is not correct. Make sure the path is relative to the current file location.

  3.In the Spending component, the key prop in the div should be unique for each element. Instead of using the index, use the spending.day as the key.

  4.In the Spending component, the inline style for the height should be in pixels rather than multiplying the amount by 2.5 because it can cause rendering issues on different screen sizes. Change height: ${spending.amount * 2.5}px} to height: ${spending.amount}px}.

  Here is the corrected code:

  import React from 'react';
  import spendings from "../../data/data.json";
  
  const Main = () => {
    return (
      <main className="bg-white p-5 rounded-lg mt-4">
        <h1 className="font-bold text-xl text-brown-800">
          Spending - Last 7 days
        </h1>
        <div className="flex items-end flex-wrap pt-5">
          {spendings.map((spending) => (
            <Spending key={spending.day} spending={spending} />
          ))}
        </div>
        <hr className="my-4 text-cream" />
        <div className="flex justify-between">
          <div>
            <p className="text-brown-300">Total this month</p>
            <p className="text-brown-800 text-3xl font-bold">$478.33</p>
          </div>
          <div className="text-right self-end">
            <p className="text-brown-800 font-bold text-sm">+2.4%</p>
            <p className="text-brown-300 text-sm">from last month</p>
          </div>
        </div>
      </main>
    );
  };
  
  const Spending = ({ spending }) => {
    const bgColor = spending.day === "wed" ? "bg-cyan-600" : "bg-red-600";
    const hoverBgColor =
      spending.day === "wed" ? "hover:bg-cyan-200" : "hover:bg-red-200";
    return (
      <div className="flex flex-col-reverse items-center gap-1">
        <p className="text-brown-300 text-sm">{spending.day}</p>
        <div
          key={spending.day}
          className={`rounded ${bgColor} ${hoverBgColor} hover:cursor-pointer peer w-[35px]`}
          style={{ height: `${spending.amount}px` }}
        ></div>
        <div className="invisible peer-hover:visible bg-brown-800 text-cream rounded p-1 text-sm">
          ${spending.amount}
        </div>
      </div>
    );
  };
  
  export default Main;
  

  Hope you will find this helpful

  0