title: Material Ui Tab show data from Api call
body: <p>I am fetching data from backend to show some meal information. There are are filters to filter out each category . Currently I am showing the filter out data by clicking a button . Each time I click a button corresponding filtered data is shown . Now what I want to do is instead of using buttons I want to use Material Ui Tabs component . I am relatively new to Materia Ui . I am not understanding how can I can show the filtered data using the Material Ui Tab component . My code is given below -</p>
  <p>Home.jsx</p>
  <pre><code>const value = useContext(DataContext);
    const [foods, setFood] = value.foods;
  
    const [tabs, setTabs] = useState([&quot;all&quot;]);
  
    useEffect(() =&gt; {
      const filtered = foods.map((food) =&gt; ({
        ...food,
        filtered: food.category.includes(tabs),
      }));
      setFood(filtered);
    }, [tabs]);
  
    const handleFilter = (tabs) =&gt; {
      setTabs(tabs);
      console.log(tabs);
      // console.log(foods);
    };
  
    return (
      
       
          &lt;TabsData handleFilter={handleFilter}&gt;&lt;/TabsData&gt;
        
  </code></pre>
  <p>TabsData.jsx</p>
  <pre><code>const TabsData = ({ handleFilter }) =&gt; {
    return (
      &lt;div className=&quot;buttons&quot;&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;all&quot;)}&gt;
          All
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Salad/Soup&quot;)}&gt;
          Salad/Soup
        &lt;/button&gt;
        &lt;button
          className=&quot;btn&quot;
          onClick={() =&gt; handleFilter(&quot;Starter/Side Order&quot;)}
        &gt;
          Starter/Side Order
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Breakfast Item&quot;)}&gt;
          Breakfast Item
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Asian Classic&quot;)}&gt;
          Asian Classic
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Chicken&quot;)}&gt;
          Chicken
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Pasta&quot;)}&gt;
          Pasta
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Western&quot;)}&gt;
          Western
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Pizza&quot;)}&gt;
          Pizza
        &lt;/button&gt;
        &lt;button className=&quot;btn&quot; onClick={() =&gt; handleFilter(&quot;Desert&quot;)}&gt;
          Desert
        &lt;/button&gt;
      &lt;/div&gt;
  </code></pre>