React JSX defaultProps syntax error

Question

i try to use this code:

import React, { Component } from 'react';

export default class Hello extends Component {
    static defaultProps = {
        somename: "World!"
    }
    render() {
        return (
            <h1>Hello {this.props.somename}</h1>
        );
    }
}

But i then i try to build it in webpack i get syntax error here:

static defaultProps = {

I didn't use jsx and lates ECMAScript standarts before. Can somebody explain me how it must be correctly write.

UPD: my webpack config:

const webpack = require('webpack');
const path = require('path');
const entryPath = path.resolve(__dirname, 'src/client/js');

module.exports = {
  mode: 'development',
  entry: {
    app: entryPath + '/app.js',
    main: entryPath + '/main.js',
  },
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: '[name].js',
  },
  module: {
        rules: [
            {
                test: /\.jsx?$/, 
                exclude: /(node_modules)/,  
                loader: "babel-loader", 
                options: {
                    presets: ["env", "react"] 
                }
            }
        ]
    }
};

Try babelrc: false in options. If the error is still there, kindly post the error too. — Praveenkumar Kalidass
– Praveenkumar Kalidass, Commented Aug 13, 2018 at 9:22

Daniel Arthur · Accepted Answer · 2018-08-13 09:44:36Z

1

If you did not want to play around with your .babelrc file, you can rewrite your code like so:

import React, { Component } from 'react';

class Hello extends Component {
    render() {
        return (
            <h1>Hello {this.props.somename}</h1>
        );
    }
}

Hello.defaultProps = {
    somename: "World!"
}

export default Hello

If this is not an option and you wish to use static class properties, then you will want to use a Babel plugin. I use babel-plugin-transform-class-properties. There is a great tutorial on the Babel website that shows you how to implement this.

From the tutorial, installation is done by:

npm install --save-dev babel-plugin-transform-class-properties

Then add the following code to your .babelrc:

{
  "plugins": ["transform-class-properties"]
}

answered Aug 13, 2018 at 9:44

Daniel Arthur

4567 silver badges17 bronze badges

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

Comments

peetya · Accepted Answer · 2018-08-13 09:42:28Z

0

Instead of creating a static function do the following:

import React, { Component } from 'react';

class Hello extends Component {
    render() {
        return (
            <h1>Hello {this.props.somename}</h1>
        );
    }
}

Hello.defaultProps = {
    somename: 'World!',
}

export default Hello;

answered Aug 13, 2018 at 9:42

peetya

3,6282 gold badges18 silver badges30 bronze badges

Collectives™ on Stack Overflow

React JSX defaultProps syntax error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related