// Tutorial //
Class Component Overview in React
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
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
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.
Using props
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.
Using state
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…
Using lifecycle hooks
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.
Want to learn more? Join the DigitalOcean Community!
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
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
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;