React Hooks in TypeScript to Classes

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!

Does this answer your question? Using state in react with TypeScript — Emile Bergeron
– Emile Bergeron, Commented May 20, 2020 at 1:53

wentjun · Accepted Answer · 2020-05-20 01:58:20Z

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

fazlu · Accepted Answer · 2020-05-20 01:13:51Z

0

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

answered May 20, 2020 at 1:13

fazlu

9567 silver badges10 bronze badges

Collectives™ on Stack Overflow

React Hooks in TypeScript to Classes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related