I have passed the data coming from the api (which is served in the Heroku server) as a props to child component using spread operator. The data is not rendered in the ui. There is no any error showing though. I am not sure what is the issue. I have got some warnings though.

My MenuPage.js

```
function MenuPage() {

  const[menu,setMenu] = useState([])

  useEffect(() => {
    axios.get('https://texas-crm1.herokuapp.com/api/menus')
    .then (res => {
      console.log(res.data)
      let data = res.data

      setMenu(res => {
        return [
          {
          title: data.category,
          thumbanail: data.image,
          }
        ]
      })
    })
    .catch(err =>{
      console.log(err)
    })

  },[])

  return (
    <div>
      <div className="menu-page">
      <PageHeader title="Explore All Menu" btnText="" />
      <div className="container">
        {menu.map((menu, index) => {
          return <MenuComponent  {...menu} key={index} />;
        })}
      </div>
    </div>
  </div>
  );
}

export default MenuPage;

```

My MenuComponent.txs

```
const MenuComponent = (props: any) => {

  const starterMenu = [
    {
      thumbnail: props.thumbnail,
      title: props.title,
      rating: 4.5,
      description:
        "Roast beef is served with vegetables and sweet and sour sauce.",
      price: "$ 15.23",
    },
    {
      thumbnail: thumbnail,
      title: "Tilapia Chili Sauce",
      rating: 4.5,
      description: "Savory fried tilapia with basil sauce, eaten warm with rice",
      price: "$ 13.99",
    },
    {
      thumbnail: thumbnail,
      title: "Avocado Egg Bread",
      rating: 4.5,
      description:
        "Breakfast goes well with hot tea and bread with avocado jam and eggs",
      price: "$ 10.99",
    },
    {
      thumbnail: thumbnail,
      title: "Spicy dumplings udon",
      rating: 4.5,
      description: "For those who like spicy food, you should try this udon",
      price: "$ 12.42",
    },
  ];

  const renderMenuList = () => {
    switch (props.name) {
      case "Starters":
        return <Starters />;

      case "Main Courses":
        return <MainCourses />;

      case "Soups & Salads":
        return <SoupsSalads />;

      case "Sliders":
        return <Sliders />;

      default:
        break;
    }
  };

  return (
    <div className="menu-component">
      <div className="title">
        <div className="main-title">{props.name}</div>
      </div>
      <div className="menu-cards">
        {starterMenu.map((starterItem, index) => {
          return <MenuCard {...starterItem} key={index} />;
        })}
      </div>
      {renderMenuList()}
    </div>
  );
};

export default MenuComponent;

```

The rendered component looks like this:

[![enter image description here](https://i.stack.imgur.com/KVWIP.jpg)](https://i.stack.imgur.com/KVWIP.jpg)

As seen above the first picture I have used the data from the get axios which is blank (no title and thumbnail), in the second picture it is ok since it is using static data. I am new to react so I need help.