React - How to access props without using constructor

Question

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?

Answer 1

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

Answer 2

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>
       )
   }
}