Space Tourism Site w/ React , React router

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 1 year ago

  Hi Yosef, Well done!

  I have some quick improvements for you:

  1. You can use Template String for dynamic class, rather than conditional rendering. Ex:

  // instead of
   index === 0 ?
             <button onClick={() => {setIndex(0);}} className="tech-btn activated">1</button>
                  :
                  <button onClick={() => {setIndex(0);}} className="tech-btn">1</button>
  
  // ✅ you can do this
    <button onClick={() => {setIndex(0);}} className=`tech-btn ${index === 0 ? "activated" : ""}`>1</button>
  

  2. As react re-renders every state changes, you can index an item on render. Ex:

  // instead of
   let techName = [];
     let info = [];
       let i = 0;
       for(let tech of Data.technology){
         techName[i] = tech.name;
         info[i] = tech.description;
         i++; 
       }
  
  // ✅ do this
  const currentTechnology = Data.technology[index]; // index on render
  const techName = currentTechnology.name
  const techInfo = currentTechnology.description
  
  return {
    <h2 className="tech-name">{techName}</h2>
     <p className="tech-description">{techInfo}</p>
  }
  

  Hope it help! Cheers!

  Marked as helpful

  0

  ---

  

  Yosef•500

  @YosityPosted over 1 year ago

  @fazzaamiarso Thank you so much for the first part ! I was uneasy about it and didn't know such solution was possible.

  Wow for the second part, I am going to check it out immediately and make the changes... I appreciate it.

  0