Note: I encounter this specific problem using React Native, but I guess this goes for React in general as well.

I have a react component built using React.Component. I don't need to set state, but I do have props. My proposed syntax was as follows:

class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>{this.props.title}</div>;
  }
}

I understand I can use a function to construct this component, like this:

const Header = (props) => {
  return <div>{props.title}</div>;
}

But I prefer the former, because my component will grow, might have state etc, and I just want to keep all my components built in a similar fashion.

Now, my linter complains about having a useless constructor, but how else do I access the props while keeping a class constructor instead of a function constructor?

Note: I encounter this specific problem using React Native, but I guess this goes for React in general as well.

I have a react component built using React.Component. I don't need to set state, but I do have props. My proposed syntax was as follows:

class Header extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>{this.props.title}</div>;
  }
}

I understand I can use a function to construct this component, like this:

const Header = (props) => {
  return <div>{props.title}</div>;
}

But I prefer the former, because my component will grow, might have state etc, and I just want to keep all my components built in a similar fashion.

Now, my linter complains about having a useless constructor, but how else do I access the props while keeping a class constructor instead of a function constructor?

• javascript
• reactjs
• react-native
• eslint

• 2 Without adding a constructor you can stil use this.props in your components. It is not a must. – bennygenel Commented Oct 19, 2017 at 18:06
• have you just tried to remove constructor? – Stanley Cheung Commented Oct 19, 2017 at 18:07
• Wow. That works. But why, then, have I been doing super(props) for two years now... Is super(props) only required if you are creating a constructor for initialising state? – Sventies Commented Oct 19, 2017 at 18:07
• Remove the constructor for now. You can later put that in when you start using state – Prakash Sharma Commented Oct 19, 2017 at 18:07
• The constructor is called by React directly after the class is instantiated. It is only necessary if you wish to execute at that point in time, such as setting initial state. You need to call super(props) if you want to interact with the props 'in the constructor'. – bluesixty Commented Oct 19, 2017 at 18:14

2 Answers 2

If you want to use this.props in the constructor, you need to pass props to super. Otherwise, it doesn't matter because React sets .props on the instance from the outside immediately after calling the constructor.

So just simply remove constructor() if useless

you can access props without constructor in a class using "this", like this:

class XXXXXX extends React.Component {
   render() {
       return (
          <div>{this.props.value}</div>
       )
   }
}