Expense Chart Component using React

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Tyler, well done using React for this challenge! About your question, the line you showed does get a bit hard to read, but the formatting usually takes care of that so it might not be so bad. For me, I prefer having all the ternary operator logic and multiple function calls placed before return, and if I were to refactor the component with this line, since the handleSelect and handleHover functions are just for that one element, I'd probably do something like this:

  function Chart() {
      ...
      
      const handleEnter = (index) => {
          setVisible("block")
          setSelected(index)
      }
  
      const handleLeave = () => {
          setVisible(null)
          setSelected(null)
      }
  
      const opacityValue = selected === report ? 0.75 : 1
  
      return (
      
       <div>
           {reports.map( report => {
  
            <div 
                 onMouseEnter={handleEnter(report)}
                 onMouseLeave={handleLeave}
                 style={opacityValue}
                 className="bar-area col-center"
             >
             {contents here}
            </div>
            })}
  
      </div>
  
     )
  }
  

  You do have a number of accessibility issues in your report; I think the main one is about landmarks, especially the lack of main, so if you just change the div to main in your App.js, that should take care of some of the issues. Once again, well done!

  Marked as helpful

  2

  ---

  

  Tyler•330

  @tylermaksPosted over 2 years ago

  @elaineleung thanks so much for your feedback - it's really helpful!

  I've refactored my component based on your advice. Also, updating the div to main seemed to fix most of the accessibility issues. Thanks again!

  -Tyler

  0