Class syntax is one of the most common ways to define a React component. While more verbose than the functional syntax, it offers more control in the form of lifecycle hooks.
This guide assumes that Babel has been properly configured for React. If you are using create-react-app, this will already be the case.
Creating a class component is pretty simple; just define a class that extends Component
and has a render
function.
// MyComponent.js
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return (
<div>This is my component.</div>
);
}
}
export default MyComponent;
From there, you can use it in any other component.
// MyOtherComponent.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';
class MyOtherComponent extends Component {
render() {
return (
<div>
<div>This is my other component.</div>
<MyComponent />
</div>
);
}
}
export default MyOtherComponent;
You don’t have to define one component per file, but it’s probably a good idea.
As is, MyComponent
isn’t terribly useful; it will always render the same thing. Luckily, React allows props to be passed to components with a syntax similar to HTML attributes.
<MyComponent myProp="This is passed as a prop." />
Props can then be accessed with this.props
.
class MyComponent extends Component {
render() {
const {myProp} = this.props;
return (
<div>{myProp}</div>
);
}
}
A variable wrapped in brackets will be rendered as a string.
One of the benefits class components have over functional components is access to component state.
class MyComponent extends Component {
render() {
const {myState} = this.state || {};
const message = `The current state is ${myState}.`;
return (
<div>{message}</div>
);
}
}
But since it wasn’t set anywhere, this.state
will be null, so this example isn’t really useful. Which brings us to…
Class components can define functions that will execute during the component’s lifecycle. There are a total of seven lifecycle methods: componentWillMount
, componentDidMount
, componentWillReceiveProps
, shouldComponentUpdate
, componentWillUpdate
, componentDidUpdate
, and componentWillUnmount
. For the sake of brevity, only one will be demonstrated.
class MyComponent extends Component {
// Executes after the component is rendered for the first time
componentDidMount() {
this.setState({myState: 'Florida'});
}
render() {
const {myState} = this.state || {};
const message = `The current state is ${myState}.`;
return (
<div>{message}</div>
);
}
}
this.state
should not be assigned directly. Use this.setState
, instead.
this.setState
cannot be used in render
.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up
Sharing one example of React Hook with class component: import React, { Component } from “react”; class Greeting extends Component { state = { text: “”, }; handleChange = (e) => { this.setState({ text: e.target.value }); }; render() { return <input value={this.state.text} onChange={this.handleChange} />; } } export default Greeting;