Product Summary Component with React

Community feedback

• 

  P

  Kuvashnee Naidoo•450

  @KuvashneeNaidooPosted 27 days 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 😁

  Marked as helpful

  1

  ---

  

  P

  Jan Kotvaš•320

  @DrakeHermitPosted 27 days ago

  @KuvashneeNaidoo Thanks a lot for taking your time and going over my code, it means a lot to me. Also for the button adding a text prop is definitely the way to go, thanks for the suggestion.

  0