Interactive pricing component using React

Community feedback

• 

  Matthias Nilsson•980

  @RalfiSlask

  Posted over 1 year ago

  Hello nice work!

  I have a few suggestions and tips.

  HTML

  Change semantics of your elements so instead of <div className="footer></div> use <footer></footer>. Use only section if it is necessary.

  Javascript

  Maybe use ternary operators for simple if statements, it is easier to read as it only takes up one line.

  instead of:

  if (isDiscounted) {
       newPrice = newPrice * 0.75;
   }
  

  use:

  newPrice = isDiscounted ? newPrice * 0.75 : newPrice

  React

  Make use of react by creating components that can be reused if necessary so you dont have to repeat code. The most obvious example is in the footer, where you have three items that could be used in a single component.

  If you instead create a component like this and make use of the text as a prop:

  const FooterFeatureItem = ( {text} ) => {
    return (
      <section className="check-section">
          <img src="./icon-check.svg" alt="" />
          <h3>{text}</h3>
      </section>
    )
  }
  
  export default FooterFeatureItem
  

  When you then have this component you can either use it by just writing it like this:

  <section className="bottom-section">
         <FooterFeatureItem text="Unlimited websites"/>
         <FooterFeatureItem text="100% data ownership"/>
         <FooterFeatureItem text="Email reports"/>
   </section>
  
  

  But a better and more dynamic way is by first creating an array of objects:

  
  const footerFeaturesList = [
          {id: 1, text: "Unlimited websites"}, 
          {id: 2, text: "100% data ownership"}, 
          {id: 3, text: "Email reports"}
  ]
  
  

  And then use the map method over this list to create the components:

   <section className="bottom-section">
       {footerFeaturesList.map(feature => <FooterFeatureItem key={feature.id} 
       text{feature.text}/>)}
   </section>
  

  11

  Marked as helpful