React Hooks in TypeScript to Classes - reactjs

Question

I'm not use React Hook in TypeScript but I have a few lines of code like below:
const [columns] = React.useState<Column[]>([
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate', title: 'Sale Date' },
{ name: 'customer', title: 'Customer' },
]);
const [rows] = React.useState<ISale[]>(sales);
const [pageSizes] = React.useState<number[]>([5, 10, 15]);
const [currencyColumns] = React.useState<string[]>(['amount']);
I want to use these React Hook in Class but I don't know how to convert them!
Can someone help me? Thanks!

Answer 1

This is how you use class based components when you are working with TypeScript and React.
First, you need to define an interface or type alias for your class component's state/props.
interface YourComponentState {
columns: Column[];
rows: ISale[];
pageSizes: number[];
currencyColumns: string[];
}
Then, you will need to supply the generic type parameters for React.Component with the types for the props/state.
class YourComponentName extends React.Component<{}, YourComponentState> {
constructor(props) {
super(props);
this.state = {
columns: [
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate', title: 'Sale Date' },
{ name: 'customer', title: 'Customer' },
],
rows: sales,
pageSizes: [5, 10, 15],
currencyColumns: ['amount'],
}
}
}

Answer 2

In class based react components, you cannot use hooks.
so, if you want something to store in state of class based component. you are going to:
class YourComponentName extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: [
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate', title: 'Sale Date' },
{ name: 'customer', title: 'Customer' },
],
rows: sales,
pageSizes: [5, 10, 15],
currencyColumns: ['amount']
}
}
}
you can access them in your component:
this.state.columns