Showing the list of categories, and adding new ones

Now that we can enter a category, when we go to the main screen, we should see it on the top of the screen, and we also want a + button to show us again the AddCategory component so we can add a new one.

Let’s do it.

First, let’s change the

const [shouldShowAddCategory, setShouldShowAddCategory] = useState(true)

to default shouldShowAddCategory to false:

const [shouldShowAddCategory, setShouldShowAddCategory] = useState(false)

Otherwise we’d always see the “add category” screen first.

From the App component, we pass the categories list to the NavBar component:

<NavBar categories={categories} />

and in NavBar.js we show them in this way:

import React from 'react'

export default props => {
  return (
    <ul>
      {props.categories
        ? props.categories.map((value, index) => {
            return <li key={index}>{value}</li>
          })
        : '<li>No categories</li>'}
    </ul>
  )
}

Next, we add the + button so we can add a new category.

import React from 'react'

export default props => {
  return (
    <ul>
      {props.categories
        ? props.categories.map((value, index) => {
            return <li key={index}>{value}</li>
          })
        : '<li>No categories</li>'}
      <li>➕</li>
    </ul>
  )
}

We emit the showAddCategory event to the parent:

import React from 'react'

export default props => {
  const triggerShowAddCategory = () => {
    props.showAddCategory()
  }

  return (
    <ul>
      {props.categories
        ? props.categories.map((value, index) => {
            return <li key={index}>{value}</li>
          })
        : '<li>No categories</li>'}
      <li onClick={triggerShowAddCategory}>➕</li>
    </ul>
  )
}

So now in src/index.js, we need to handle that:

const showAddCategory = () => {
  setShouldShowAddCategory(true)
}

and we pass it as a prop to NavBar:

<NavBar categories={categories} showAddCategory={showAddCategory} />

Cool! We can now add some Tailwind classes to make it all look good, and we’re done:

import React from 'react'

export default props => {
  const triggerShowAddCategory = () => {
    props.showAddCategory()
  }

  return (
    <ul className="list-reset inline flex justify-center border-b-4 mb-0">
      {props.categories
        ? props.categories.map((value, index) => {
            return (
              <li
                className="p-4 inline bg-grey-lighter hover:bg-grey-light uppercase font-black cursor-pointer"
                key={index}
              >
                {value}
              </li>
            )
          })
        : '<li>No categories</li>'}
      <li
        className="p-4 inline bg-grey-lighter hover:bg-grey-light uppercase font-black cursor-pointer"
        onClick={triggerShowAddCategory}
      >
        ➕
      </li>
    </ul>
  )
}

Note: I repeat some styles in the two li elements. If you use create-react-app locally, you can create a class to include those styles:

.top-menu-item {
  @apply .p-4 .inline .bg-grey-lighter  .uppercase .font-black;
}

Unfortunately, this is not possible at the moment using CodeSandbox, so for the sake of simplicity, we’ll stick with duplicates.

I tell you just to know that Tailwind can avoid being that verbose, and much more concise.

You could also just extract a string:

import React from 'react'

export default props => {
  const triggerShowAddCategory = () => {
    props.showAddCategory()
  }

  const liStyle =
    'p-4 inline bg-grey-lighter hover:bg-grey-light uppercase font-black cursor-pointer'

  return (
    <ul className="list-reset inline flex justify-center border-b-4 mb-0">
      {props.categories
        ? props.categories.map((value, index) => {
            return (
              <li className={liStyle} key={index}>
                {value}
              </li>
            )
          })
        : '<li>No categories</li>'}
      <li className={liStyle} onClick={triggerShowAddCategory}>
        ➕
      </li>
    </ul>
  )
}

See the app in the current state on CodeSandbox.

---

Go to the next lesson