Product Summary Component with React

Community feedback

• 

  Kuvashnee Naidoo•450

  @KuvashneeNaidoo

  Posted 3 months ago

  Hi Jan! Excellent work on creating this product summary using React. For your first time using React, you nailed it! 👏👏👏

  Your app is structured fairly well, and I love how you’ve defined separate components, this makes the code modular and reusable. The transformJSON function is also a clean way to handle your data. Plus, the use of the pages folder and the App.jsx file for organizing high-level page structure vs. UI components is a great best practice. This organization will make your project easier to scale and maintain as it grows.The structure is great overall!

  As some stretch feedback, you can explore using props for more flexibility.

  Here’s an example: The Button component currently has "Continue" hardcoded as the text. You can pass the button text as a prop to make it adaptable for different contexts.

  Button.jsx

  import "./Button.css";
  
  // Function receives text as a prop
  export const Button = ({ text }) => {
    return <button className="card__button">{text}</button>;
  };
  
  

  MainPage.jsx

  // Pass values to the Button component as a prop
  <Button text="Submit" />
  <Button text="Next" />
  

  This is just a small insight which can make your Button component more reusable, allowing the same component to display different content based on the prop value passed to it.

  Keep up the great work! Happy coding 😁

  11

  Marked as helpful