CODEWITHSUNDEEP
javascriptreactjsjsx
Serial_Seth
Serial_Seth

Reputation: 51

React compiler won't accept my .map function as a function

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. ​​​ ​​

​

Upvotes: 2

Views: 81

Answers (2)

ravibagul91
ravibagul91

Reputation: 20765

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

Upvotes: 2

Jordan
Jordan

Reputation: 166

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

Upvotes: 1

Related Questions