Why do I keep getting The class method 'componentDidMount' must be makred either 'private' 'public' or 'protected' warnings, in my tsx files?

Question

I am not sure what I am supposed to mark my methods in my react class components. I am getting this error on these methods: componentDidMount, componentDidUpdate, componentWillUpdate and render

Here is a basic component that I have:

import * as React from 'react';

const { Component } = React;

export default class Loading extends Component<{}, {}>  {
  componentDidMount() {
    console.log('....something....');
  }
  componentDidUpdate() {
    console.log('....something....');
  }
  componentWillUpdate() {
    console.log('....something....');
  }

  render() {
    const style = {
      background: '#f5f5f5',
      height: '100%',
      padding: '20px',
      textAlign: 'center',
      transition: 'all 0.5s linear',
      width: '100%'
    };
    return (
      <div id='app-loader' className='rounded' style={style}>
        <div className='loader large block rounded'>Loading...</div>
      </div>
    );
  }
}

I can't put private render() etc because that breaks the component.

Answer 1

This is the tslint member-access rule.

In tslint.json, change:

"member-access": true

To:

"member-access": [true, "no-public"] // Or false. Read the rule and see what you want.