CODEWITHSUNDEEP
javascriptreactjsreact-nativeeslint
Sventies
Sventies

Reputation: 2756

React - How to access props without using 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?

Upvotes: 8

Views: 8893

Answers (2)

Adolfo Onrubia
Adolfo Onrubia

Reputation: 1831

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

Upvotes: 4

Stanley Cheung
Stanley Cheung

Reputation: 958

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

Upvotes: 16

Related Questions