CODEWITHSUNDEEP
reactjstypescriptreact-hooks
An Duy
An Duy

Reputation: 35

React Hooks in TypeScript to Classes

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!

Upvotes: 0

Views: 6003

Answers (2)

wentjun
wentjun

Reputation: 42516

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'],
    }
  }
}

Upvotes: 1

fazlu
fazlu

Reputation: 956

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

Upvotes: 0

Related Questions