"Unexpected Token" when using the map function in React

Question

I'm currently learning React and the idea of state and props is fairly new. At the moment I'm trying to create a SideNav component that renders some SideNavButton components. It's my first attempt at trying to pass props to child components and I keep getting this really unhelpful error that looks like this:

Syntax error: ./components/side-nav.js: Unexpected token, expected , (43:8)
41 |           <SideNavButton button={button} />
42 |         );
>43|       });
.. |         ^
44 |     );
45 |   }
46 |

I've honestly come to believe that this isn't even pointing at the problem. I'll post my code, and feel free to let me know if there is anything I could be doing better.

./index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import SideNav from './components/side-nav';

const App = () => {
  return (
    <div>
      <SideNav />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

./components/side-nav.js

import React, { Component } from 'react';
import SideNavButton from './side-nav-button';


class SideNav extends Component {

  constructor(props) {
    super(props);

    this.state = {
      navButtons: [
        {
          label: "Profile",
          icon: "fas fa-user",
          location: "#!"
        }, {
          label: "Experience",
          icon: "fas fa-book",
          location: "#!"
        }, {
          label: "Education",
          icon: "fas fa-university",
          location: "#!"
        }, {
          label: "Technology",
          icon: "fas fa-code",
          location: "#!"
        }, {
          label: "Connect",
          icon: "fas fa-share-alt",
          location: "#!"
        }
      ]
    };
  }

  renderButtons() {
    return(
      this.state.navButtons.map(button => {
        return(
          <SideNavButton button={button} />
        );
      });
    );
  }

  render(
    return (
      <ul className="side-nav">
        {renderButtons();}
      </ul>
    );
  );
}

export default SideNav;

./components/side-nav-button.js

import React from 'react';

const SideNavButton = ({button}) =>  {

  return(
    <li key={button.label}>
      <a href={button.location}>
        <i className={button.icon}></i>{button.label}
      </a>
    </li>
  );
}

export default SideNavButton;

Should they? I'm using the create-react-app method and have no idea about webpack or babel. I could be wrong, but from what I've seen its just .js. — Tyler B
– Tyler B, Commented Feb 24, 2018 at 3:47

Akhilesh krishnan · Accepted Answer · 2018-02-24 04:02:31Z

3

There were some issues with side-nav.js, please try this corrected snippet

class SideNav extends Component {
        constructor(props) {
        super(props);

        this.state = {
          navButtons: [
            {
              label: "Profile",
              icon: "fas fa-user",
              location: "#!"
            },
            {
              label: "Experience",
              icon: "fas fa-book",
              location: "#!"
            },
            {
              label: "Education",
              icon: "fas fa-university",
              location: "#!"
            },
            {
              label: "Technology",
              icon: "fas fa-code",
              location: "#!"
            },
            {
              label: "Connect",
              icon: "fas fa-share-alt",
              location: "#!"
            }
          ]
        };
       }

      renderButtons() {
        return this.state.navButtons.map(button => {
          return <SideNavButton button={button} />;
        });
      }

      render() {
        return <ul className="side-nav">{this.renderButtons()}</ul>;
      }
    }

    export default SideNav;

i have corrected the renderButtons() and the render(){} methods

Please find you code in Link

edited Feb 24, 2018 at 4:02

answered Feb 24, 2018 at 3:55

Akhilesh krishnan

7992 gold badges8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tyler B Over a year ago

Thank you so much! What exactly was I doing wrong if you don't mind me asking?

Akhilesh krishnan Over a year ago

@TylerB 1. Render method is a function that return jsx not a function call. You where doing render(return <ul></ul>); which has to be render(){ return<ul>button</ul>;} when calling a function within the class use this.renderButtons()

Akhilesh krishnan Over a year ago

2.There was syntax mistakes in renderButtons() method

000 · Accepted Answer · 2018-02-24 03:25:04Z

1

Please read this class definition reference with examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Method definitions do not have a semicolon. So remove all of those.

Classes do not have consts. Consts can be in methods/functions, but can't be top-level in a class.

You could turn const buttons = ... into a method: buttons() { return ...; }

answered Feb 24, 2018 at 3:25

000

27.3k10 gold badges74 silver badges103 bronze badges

4 Comments

Tyler B Over a year ago

Thanks for the fast reply. I'm still currently getting the same error, but I've updated the code in the question to reflect what you've said.

Code-Apprentice Over a year ago

@TylerB The current version of your code still doesn't fix everything described in this answer.

Tyler B Over a year ago

@Code-Apprentice The error section? Just fixed that up now

000 Over a year ago

Remove the semicolon from {renderButtons();}. What is the error you're getting now?

Collectives™ on Stack Overflow

"Unexpected Token" when using the map function in React

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related