Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why map method returns .map is not a function?

The array

const props: NavButtonProps[] = [
    {
        text: "Home",
        url: "teste"
    },
    {
        text: "Services",
        url: "teste"
    },
    {
        text: "projects",
        url: "teste"
    }
]

where the method map is used

const NavButtonWrapper = (buttons: NavButtonProps[]): ReactElement => {
    return (
        <div className="flex space-x-16">
            { buttons.map((button) => { return (<NavButton {...button}/>)})}
        </div>
    )
}

I’ve already seen some cases where it works, but i don’t know why in my code it returns buttons.map is not a function

Tags:

3

Answers


  1. 0

    It’s just a syntax error, you can try removing () after return statement ,
    Find the below code

    {buttons.map((button) => {

    return <NavButton {...button} />;

    })}

    Thanks, hope this help.

    Login or Signup to reply.
  2. 0

    try it this way:

        import React from 'react';

    interface NavButtonProps {
      text: string;
      url: string;
    }

    const App: React.FC = () => {

      const buttons: NavButtonProps[] = [
        {
          text: 'Home',
          url: 'test',
        },
        {
          text: 'Services',
          url: 'test',
        },
        {
          text: 'Projects',
          url: 'test',
        },
      ];

      // This is only for testing, you can replace it with your own component
      const NavButton: React.FC<NavButtonProps> = ({ text, url }) => {
        return (
          <li className="nav-button">
            <a href={url}>{text}</a>
          </li>
        );
      };

      const NavButtonWrapper: React.FC = () => {
        return (
          <div className="flex space-x-16">
            {buttons.map((button, index) => (
              <NavButton key={index} {...button} />
            ))}
          </div>
        );
      };

      return (
        <div>
          <NavButtonWrapper />
        </div>
      );
    };

    export default App;
    Login or Signup to reply.
  3. 0

    Destructure the props to access the buttons prop.

    const NavButtonWrapper = ({ buttons } : { buttons: NavButtonProps[] }) => (
    <div className="flex space-x-16">
        {buttons.map(button => <NavButton {...button}/>)}
    </div>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search