3-column preview card component - CSS Flex

Community feedback

• 

  Cătălina Hasnaș•300

  @Catalina-HasnasPosted about 1 year 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 helpful

  0

  ---

  

  Vladimir Gatara•250

  @vgarmyPosted about 1 year ago

  @Catalina-Hasnas Thanks you are so right, in gonne change it according too your recomendation.

  Regards Vladimir

  0