Reactjs Filter.js

import React, { useState } from 'react';

const foods = [
  {
    name: 'Pabellon',
    type: 'lunch'
  },
  {
    name: 'Empadanda',
    type: 'breakfast'
  },
  {
    name: 'Arepa',
    type: 'breakfast'
  }
];

function App () {

  const [myFoods, setFoods] = useState(foods);

  const filterByType = (type) => setFoods(() => foods.slice().filter(food => food.type === type || type === 'all'));

  return (
    <div>
      <div>
        <button onClick={() => filterByType('all')}>all</button>
        <button onClick={() => filterByType('breakfast')}>breakfast</button>
        <button onClick={() => filterByType('lunch')}>lunch</button>
      </div>
      <div>
        {myFoods ? myFoods.map((food, index) =>
          <p key={index}>{food.name}</p>
        ) : (
          <p>what.the.hell</p>
        )}
      </div>
    </div>
  )

}

export default App;