The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Public Class Fields with React Components

Public Class Fields with React Components

4:52
[Public Class Fields](https://tc39.github.io/proposal-class-public-fields/) allow you to add instance properties to the class definition with the assignment operator (`=`). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.
Watch this lesson now
Avatar
egghead.io

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

Avatar
Vamshi

Excellent video. But why in 2017? :D
I wish this came out in 2015/2016

Avatar
Kent C.

Haha! Yeah, it's probably good to note that Public Class Fields are still relatively new. Stage 2 stuff!

In reply to Vamshi
Avatar
David

After many puzzlings of "why this way? Dunno, it works" ... thanks for the light bulb moment!

Avatar
Kent C.

I'm glad it was helpful!

In reply to David
Avatar
Gary

Can you tell me is there a way to enable Public Class Fields in standardjs eslint

Avatar
Kent C.

Sorry, I don't use standard. I have my own eslint config and I use the babel-eslint parser to get linting on upcoming features like this.

In reply to Gary
Avatar
Vamshi

Kent, I was trying this out today

import React, { PropTypes, Component } from 'react';
import Loading from 'gssp-common-lib/lib/components/gssp/leafs/loading/loading.component';

class SurveyQuestions extends Component {
  componentWillMount = () => {
    this.props.overrideEmit('surveyquestions');
  }
  render() {
    return (
        <div>
        {this.props.loading ? <Loading /> : null}
          <h2> Hello World </h2>
        </div>
    );
  }
}

export default SurveyQuestions;

This is undefined. Can you please tell me what Im missing here?

In reply to Kent C.
Avatar
Kent C.

Perhaps I should have mentioned this, but you don't want to do this for lifecycle methods that React will call with your instance. You'll want to use public class fields sparingly.

In reply to Vamshi
Avatar
Gary

Hi Kent,
Found a way,i just had to install babel-eslint and add "parser": "babel-eslint" in .eslintrc file , thanks a lot

In reply to Kent C.
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?