map a nested array of object from db to show dropdown menu list-CodePudding

I'm trying to make a dropdown menu like this

-title 1

|-> "lists of items with a href attached"

-title 2

|-> "lists of items with a href attached"

-title 3

|-> "lists of items with a href attached"

Right now my code is like this

footerMenu.js

import { useState } from "react";
import FooterItem from "./FooterItem";

const FooterMenu = (props) => {
  return (
    <>
      <div className="dropdown-menu shadow-lg shadow-slate-300 ml-[40vw] px-12">
        <ul className="list-none">
          <FooterItem val={"About Us"} />
          <FooterItem val={"Careers"} />
          <FooterItem val={"Social Impact"} />
          <FooterItem val={"For Business Partners"} />
          <FooterItem val={"Order and Pickup"} />
        </ul>
      </div>
    </>
  );
};

export default FooterMenu;

footerItem.js

import { useState } from "react";
import { FooterList } from "./FooterList";

const FooterItem = (props) => {
  const [open, setOpen] = useState(false);

  const showDropdown = () => {
    setOpen(!open);
  };

  return (
    <li onClick={showDropdown} className="menu-head p-5">
      <h2 className="text-xl font-semibold mb-5">{props.val}</h2>
      <ul
        className={`menu-item relative px-1 gap-y-5 ${
          open ? "open-list" : "close-list"
        }`}
      >
        <FooterList />
      </ul>
    </li>
  );
};
export default FooterItem;

and footerList.js

import axios from "axios";

export const FooterList = async () => {
  let response = await axios.get(`http://localhost:5000/footerMenu`);
  return response.data[0].content.map((val) => {
    return (
      <>
        <li>
          <a href={val.link}>
            {val.subtitle}
          </a>
        </li>
      </>
    );
  });

my plan was adding the lists of items for each menu title in a database, and then using axios to get the list but it says objects are not valid as a react child(found: Object Promise])

this is the db i made

i don't know if there is a simpler way of making this dropdown menu

CodePudding user response：

You must use hooks to call async function in react functioal component.

import { useState, useEffect } from "react";
import axios from "axios";

export const FooterList = () => {
  const [footerData, setFooterData] = useState();

  useEffect(() => {
    axios.get(`http://localhost:5000/footerMenu`)
      .then((response) => setFooterData(response.data[0].content));
  }, [])

  return footerData ? footerData.map((val) => {
    return (
      <li>
        <a href={val.link}>
          {val.subtitle}
        </a>
      </li>
    );
  }) : <LoadingComponent />;

}