Three column card component built with React and Tailwind CSS

Community feedback

• 

  P

  Rupali•780

  @rupali317Posted 11 months ago

  Hello @RoksolanaVeres

  Great work on implementing this challenge using React

  I have the following suggestions:

  I notice that you are using conditions like isSedan, isLuxury, isSuv in your Card.jsx, CardButton.jsx. You can simplify the process by eliminating those conditions since it is hard to maintain as well.

  How about within your data.js, you have the classnames? something like:

  export const cardData = [
    {
      id: 1,
      header: "Sedans",
      text: "Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip",
      className: "card--sedan"
    },
    {
      id: 2,
      header: "Suvs",
      text: "Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.",
      className: "card--suv"
    },
    {
      id: 3,
      header: "Luxury",
      text: "Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style",
       className: "card--luxury"
    },
  ];
  

  and you can then pass these classes as the prop in your App.jsx. From there you can have the stylings for the respective cards and the buttons

  <Card
       key={card.id}
       paragraph={card.text}
       header={card.header}
       id={card.id}
       className={card.className}
  />
  

  Also, you can even use spread operator to simplify the above instead of having to type out each property whenever you update your data.js with more key-value pairs, something like:

  <Card
       key={card.id}
       {...card}
  />
  

  Hope this helps! Let me know if it works!

  Marked as helpful

  1

  ---

  

  Roksolana•910

  @RoksolanaVeresPosted 11 months ago

  Hi, @rupali317 ! Thank you very much for your help 🙂 Somehow I've managed to improve my solution following your advice, but this props-sharing thing definitely requires more investigation and understanding from my side) Thank you once again for your feedback and have a nice day)

  1

  

  P

  Rupali•780

  @rupali317Posted 11 months ago

  @RoksolanaVeres Great! Glad to know it helped!

  1