React编译器不会接受我的.map函数作为函数

Question

I can't get to get the complier acknoledge that I am passing an array to the map function, so I keep getting an error that my .map function is not a function. I just want to list links in an unordered list.

I've tried assigning the data to an generic array with in the function, and now it's greatgrandparent's state, where it's assigned is set up to be an array. I even made a close replica of the code off of the reactjs' site to accomplish what I want out of the logic to use the map function.

const mobileMenu = (props) => {

    return (
        <div className={classes.MobileMenu}>
        <h1 id={classes.MobileMenu__Title}>Water Resources</h1>
        <div>
            <button id={classes.LoginButton}>Login</button>
            <button id={classes.RegisterButton}>Register</button>
        </div>
        <div>
        {menuLinks(props.links)}
        </div>
    </div>
    );
}

calls

const menuLinks = (links) => {
    console.log (links);
    let Links = links;
    const listLinks = Links.map((Links) =>
    (<li key={Links.index.toString()}>
    <a href={Links.link}>{Links.name}</a>
    </li>));
    return (

        <ul>           
            {listLinks()}        
        </ul>
);}

Debugger states that object is a link array, but I keep on getting the error that the list links function is undefined.

mainlinks = [
      {name: "Home", link: "#Home"},
      {name: "Calculator", link: "#Calculator"},
      {name: "Reference", link: "#reference"},
      {name: "About", link: "#About"}
]

that is set in state. ​​​ ​​

​

Answer 1

The problem is here,

{listLinks()}

You are trying to execute function listLinks which is not a function.

Just use {listLinks} without parenthesis like below,

const menuLinks = (links) => {
        console.log(links);
        const listLinks = links.map(link =>{
           return (
              <li key={link.name}>
                  <a href={link.link}>{link.name}</a>
              </li>
           )
        }); 
        return (
            <ul>           
             {listLinks}        
            </ul>
        );
    }

---

If you are receiving group of object then here you can find iterate over object https://hackernoon.com/5-techniques-to-iterate-over-javascript-object-entries-and-their-performance-6602dcb708a8

Answer 2

Maybe like this ?

const menuLinks = (links) => {    
    return (
        <ul>           
         {
            links.map(link => (
              <li key={link.name}>
                <a href={link.link}>{link.name}</a>
              </li>
            ))
         }        
        </ul>
    );
}

Edit : I saw some stuff that were weird you're using "Links" for the array name and the map element name i had some issues with this

In the return, listLinks is not a function but a new array

Or like people said in the comments maybe it's not an array :x