CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Arif YILMAZ
Arif YILMAZ

Reputation: 5866

React.js gives Unexpected token

I am new to React.JS. I am trying a very simple layout but It gives an error to the parantehsis before "this" keyword. Why does it give the error? Any help would be appreciated.

import React, { Component } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { NavMenu } from './NavMenu';
import Header from './Header'
import Footer from './Footer'

export class Layout extends Component {
  displayName = Layout.name

  render() {
      return (
          <Header />
            {this.props.children}
          <Footer />
      );
  }
}

Upvotes: 0

Views: 487

Answers (4)

TKoL
TKoL

Reputation: 13892

import React, { Component } from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { NavMenu } from './NavMenu';
import Header from './Header'
import Footer from './Footer'

export class Layout extends Component {
  displayName = Layout.name

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.children}
        <Footer />
      </React.Fragment>
    );
  }
}

You can't have components raw like that in the root, they need to be wrapped up

You can replace them with <> ... </> if you like, depending on your react environment.

Upvotes: 1

Abraham
Abraham

Reputation: 9845

In React you must have only one child.

Instead of this:

<Header />
  {this.props.children}
<Footer />

Use this:

<div>
  <Header />
    {this.props.children}
  <Footer />
</div>

but why is that? Let’s start with the beginning of a render:

render() {
  return (
    <div></div>
  );
}

In Vanilla JS that becomes this:

render() {
 return (
   React.createElement("div", null)
 );
}

If you’re familiar with JavaScript you might see that this is not a React issue; this is a JavaScript design limitation. Functions can not return multiple values.

Then there are logic blocks within JSX (for lack of a better term. Basically this is a place in the JSX that allows you to use ternary operators or template (a) string(s):

This:

render() {
 return (
  <div>
    {
      true ? <div>true stuff here</div> : <div>false stuff here</div>
    }
  </div>
 );
}

Transforms to this:

render: function render() {
    return React.createElement(
      "div",
      null,
      true ? React.createElement(
        "div",
        null,
        "true stuff here"
      ) : React.createElement(
        "div",
        null,
        "false stuff here"
      )
    );
  }

TL:DR, each element can be the only value returned in a function, and child elements are arguments passed.

Upvotes: 1

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4879

The render() function must return a single element containing any number of child elements. You can do it with a <div> or with a <React.Fragment>

  render() {
      return (
        <React.Fragment>
          <Header />
            {this.props.children}
          <Footer />
        </React.Fragment>
      );
  }

Upvotes: 2

Shmili Breuer
Shmili Breuer

Reputation: 4147

You may only return one element from a react component. To return multiple siblings you need to wrap the returned elements with <></> like this

I add //change above the lines I edited

return (
    //change
    <>
        <Header />
            {this.props.children}
        <Footer />
    //change
    </>
  );

Upvotes: 2

Related Questions