Design comparison
Solution retrospective
Feedback always good :)
Community feedback
- @Catalina-HasnasPosted 12 months ago
Hello, Vladimir!
I have some feedback about your usage of React. Since you're using React, why not take advantage of one of the most important features of React - reusable components?
In your "Card" component, which is a misleading name (It's actually a container of 3 other items, so the name should be plural), you can see that you have three blocks of code that are similar.
Instead of repeating the same code 3 times, you can export this block of code in it's own component and pass different props to it.
This is how it would look like:
const Item = (props) => { return ( <div className={props.className}> <img src={props.icon} alt={props.name}></img> <h2>{props.name}</h2> <p>{props.description}</p> <button>Learn More</button> </div> ); }
And then, from the parent Component, you can pass those props
<Item name="Sedan" icon={SedanIcon} description="Sedan description"/> <Item name="SUV" icon={SUVIcon} description="SUV description" />
This is the article from the React documentation where you can read more about passing props.
Otherwise, you can do the same thing that you did using plain HTML, CSS and Javascript. You don't need React for this.
Marked as helpful0@vgarmyPosted 12 months ago@Catalina-Hasnas Thanks you are so right, in gonne change it according too your recomendation.
Regards Vladimir
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord