React ES6 components using arrow functions

Question

Very new to react, I have a class like:

export const Checkbox = ({ label, className }) => {
  ....
  .... 
  return(
    .............
    .............

  );             
}

In such a class how can I specify add a componentDidMount and componentWillReceiveProps?

Edit:

I have a layman's doubt, which is the correct way to create a wrapper react component for checkbox? functional component or by extending from Component? If I create a Checkbox wrapper component for others to use, will it be possible for them to connect to a store (say redux) from their pages?

Thanks, Santhosh

You cannot. That's actually invalid syntax. You would want to replace render with return. To utilize lifcycle methods use must create a class which extends React.Component — pizzarob
– pizzarob, Commented Aug 18, 2017 at 22:39

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You can't.

These are functional components and do not support React's lifecycle methods.

If you want to use React's lifecycle methods, you need a class that inherits from React.Component

See example below.

class Example extends React.Component {
    
   componentDidMount(){
     //code here
   }
    
}

Here is a good answer explaining the differences and when to use functional over class components.

UPDATE from React 16.8

Lifecycle methods can now be used with the introduction of hooks.

If you wished to implement componentDidMount you would use the useEffect hook and pass an empty array as the second argument. An example would look like as follows.

const Example = () => {
  React.useEffect(() => {
    // do stuff here
  }, []);
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 18, 2017 at 22:39

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

john_omalley Over a year ago

typo in source code - should be extends React.Component

Paul Fitzgerald Over a year ago

@john_omalley well spotted! I should really go to sleep here!

0xRm · Accepted Answer · 2017-08-18 22:47:25Z

2

You can't.

If you want to use React's lifecycle methods, you need a class that inherits from React.Component.

export class Checkbox extends React.Component {
    componentDidMount() {
        ....
    }

    render() {
        const { label, className } = this.props;
        ....
    }
}

edited Aug 18, 2017 at 22:47

answered Aug 18, 2017 at 22:40

0xRm

1,2678 silver badges12 bronze badges

3 Comments

kallada Over a year ago

@ I have a layman's doubt, which is the correct way to create a wrapper react component for checkbox? functional component or by extending from Component? If I create a Checkbox wrapper component for others to use, will it be possible for them to connect to a store (say redux) from their pages?

0xRm Over a year ago

@kalladaYou can use either to create your own wrapper of a checkbox. Redux works with supplying props to a component, so any component that renders based on props will work.

0xRm Over a year ago

@paul_fitzgerald I'm a bit confused why your answer, which has literally copied the main sentence from my answer is now changed to the accepted answer.

john_omalley · Accepted Answer · 2017-08-18 22:39:24Z

1

You cannot. You should create a class that extends PureComponent or Component if you need lifecycle methods.

answered Aug 18, 2017 at 22:39

john_omalley

1,3986 silver badges13 bronze badges

Collectives™ on Stack Overflow

React ES6 components using arrow functions

3 Answers 3

UPDATE from React 16.8

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

UPDATE from React 16.8

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related