CODEWITHSUNDEEP
javascriptreactjscomponents
Mel
Mel

Reputation: 2705

Writing Components in React - MERN stack issues

I am trying to figure out how to write a Component in a MERN app.

This is my best effort, taking account of this advice on how to go about it?

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactBootstrap from 'react-bootstrap'

var GreeterMessage = require('GreeterMessage');
var GreeterForm = require('GreeterForm');

class Greeter extends React.Component {
  getDefaultProps: function () {
    return {
      name: 'React',
      message: 'This is the default message!'
    };
  },
  getInitialState: function () {
    return {
        name: this.props.name,
        message: this.props.message
    };
  },
  handleNewData: function (updates) {
    this.setState(updates);
  },
  render: function () {
    var name = this.state.name;
    var message = this.state.message;

    return (
      <div>
        <GreeterMessage name={name} message={message}/>
        <GreeterForm onNewData={this.handleNewData}/>
      </div>
    );
  }
};

When I save this and run web pack in my terminal to check everything, I get this feedback:

ERROR in ./app/components/Greeter.jsx
Module build failed: SyntaxError: Unexpected token (9:19)

   7 | 
   8 | class Greeter extends React.Component {
>  9 |   getDefaultProps: function() {
     |                    ^
  10 |     return {
  11 |       name: 'React',
  12 |       message: 'This is the default message!'

 @ ./app/app.jsx 19:14-32

I can't find any resources to help me figure out what a token is, let alone when they are expected or unexpected.

Can anyone see where I'm getting this wrong? I've just finished 5 separate udemy courses that are supposed to be an intro to react and MERN, and I can't get the first step to work.

Upvotes: 0

Views: 73

Answers (2)

Pineda
Pineda

Reputation: 7593

It looks like your mixing the older React.createClass syntax with the latest ES6 class notation. You can't mix and match :)

You're also using both CommonJS and ES6 versions of importing code into your file. Although this won't break the code (unless you're using a setup that doesn't support import, I would advise dine consistently wouldn't go amiss.

Here is an example of an amended version of your code to use the ES6 syntax:

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactBootstrap from 'react-bootstrap'

import GreeterMessage from 'GreeterMessage');
import GreeterForm from 'GreeterForm');

// sets the default values for props
Greeter.defaultProps = {
  name: 'React',
  message: 'This is the default message!'
};

class Greeter extends React.Component {
  constructor(){
    super();
    // sets the initial state
    this.state = {
      name: this.props.name,
      message: this.props.message
    };

    // due to this not being bound intrinsically to event handlers,
    // it's advisable to do it here so that the reference to 
    // this.setState works as expected:
    this.handleNewData = this.handleNewData.bind(this);
  }

  handleNewData(updates) {
    // `this` is not automatically bound to event handlers in ES6
    // Ensure that it is bound by using `.bind` (see constructor)
    // OR with ES6 arrow functions
    this.setState(updates);
  }

  render() {
    var name = this.state.name;
    var message = this.state.message;

    return (
      <div>
       <GreeterMessage name={name} message={message}/>
       <GreeterForm onNewData={this.handleNewData}/>
      </div>
    );
  }
};

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104429

Issue is you are mixing es5 and es6 way of writing the react component. I will suggest you to write in es6. Pasted useful links in the last, refer those links for more details.

Write it like this:

class Greeter extends React.Component {

    constructor(){
        super();
        this.state = {
            name: this.props.name,
            message: this.props.message
        }
        this.handleNewData = this.handleNewData.bind(this);
    }

    handleNewData (updates) {
        this.setState(updates);
    }

    render () {
        var name = this.state.name;
        var message = this.state.message;

        return (
            <div>
              <GreeterMessage name={name} message={message}/>
              <GreeterForm onNewData={this.handleNewData}/>
            </div>
        );
    }
};

Greeter.defaultProps = {
    name: 'React',
    message: 'This is the default message!'
};

Links:

DefaultProps

es6 class

React DOC

No Autobinding of methods

Upvotes: 1

Related Questions