Decompose larger components into subcomponents.

When your component is rendering mainly html tags, you have an opportunity to break it up into smaller subcomponents, which you can then render as JSX.

You're using button several times to do a similar job, which tells me you could write a Button component. If you decompose into smaller components (you don't necessarily need a new file for each tiny subcomponent, they can go in the same file as the main component that is exported)

With a little decomposition, your Menu component's render could look like this:

<MenuContainer>
  <TabContainer>
    <Button
      onClick={() => setContentChoice("most-recent")}
      highlighted={contentChoice === "most-recent"}>
      Most Recent
    </Button>
    <Button
      onClick={() => setContentChoice("favourites")}
      highlighted={contentChoice === "favourites"}>
      Favourites
    </Button>
  </TabContainer>
  <FilterContainer>
    <Button
      onClick={toggleTweetsSelected}
      highlighted={tweetsSelected === true}>
      Tweets
    </Button>
    <Button onClick={toggleNewsSelected}
      highlighted={newsSelected === true}>
      News Articles
    </Button>
  </FilterContainer>
</MenuContainer>

FACxBeamery / Tom_Thomas_7_through_9

Decompose larger components into subcomponents. #22