Migrating a class component to React Hooks
Let’s transform code that is currently using class components and is also using some life cycle methods. In this example, we are fetching the issues from a GitHub repository and listing them.
For this example, you will need to install axios
to perform the fetch:
npm install axios
This is the class component version:
import axios from 'axios'
import { Component } from 'react'
type Issue = {
number: number
title: string
state: string
}
type Props = {}
type State = { issues: Issue[] }
class Issues extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
issues: []
}
}
componentDidMount() {
axios.get('https://api.github.com/repos/ContentPI/ContentPI/issues')
.then((response: any) => {
this.setState({
issues: response.data
})
})
}
render() {
const { issues = [] } = this...