React study Notes (3)-Loop render component

The project often encounters an array of data that is used to iterate over the scene in the HTML template. For example, I have the following data:

Export default[
    {
        link: "/",
        Label: "Home",
        submenu:[]
    },
    {
        link: "/stateprop",
        Label: "Stateprop",
        submenu:[]
    },
    {
        link: "/lifecycle",
        Label: "Lifecycle",
        submenu:[]
    }

]

And then we get this data and assign it to menulist.

Import Menulist from "./menulist"

Start rendering

{Menulist.map (item, index) = {
       return <menuitem key={index}>
         <navlink
           To={item.link}
           onclick={this
           . Navclick
           bind (this, index)}>{item.label}</navlink>
       </menuitem >
     })
}

This makes it possible to get more than the length of the data.