Responsive Time Tracking Dashboard using React

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Juan, about using map() three times:

  You can try using forEach() instead. When you use map(), you will always get an array back with whatever modifications you done to it, whereas forEach() simply loops through each item of the array without returning that item in the array, unless you tell it to do so. Since you want to actually return an object and not the array in the data, you can try something like this:

  Start with creating an object with the three timeframes, with each key getting an empty array:

  const dataObj = {
    daily: [],
    weekly: [],
    monthly: []
  }
  

  And then use forEach() like this within your .then():

  data.forEach( item => {
    const { title, timeframes } = item
    const { daily, weekly, monthly } = timeframes
    // I deconstructed the objects just to simplify things
  
    dataObj.daily.push({ title: title, timeframes: daily })
    dataObj.weekly.push({ title: title, timeframes: weekly })
    dataObj.monthly.push({ title: title, timeframes: monthly })
  })
  
  setData(dataObj)
  

  Hope this helps, and great job with writing your dashboard in React!

  Marked as helpful

  1

  ---

  

  Juan•140

  @juandavid015Posted over 2 years ago

  @elaineleung I get it. Thanks, that's what i was trying to get, i'll try it

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @juandavid015 No problem, good luck!

  0
• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge! your report has a few issues though:

  1. wrap everything in your body in <main> or use semantics

  2.   it is a best practice to use both HTML 5 and ARIA landmarks to ensure all     content is contained within a navigational region.

  Hope it helps:)...don't forget to mark it as helpful 👍

  You can get more details here...click here

  0