react components typescript code example
Example 1: typescript react class component
import * as React from 'react';
export interface TestProps {
count: number;
}
export interface TestState {
count: number;
}
class Test extends React.Component<TestProps, TestState> {
state = { count:0 }
render() {
return ( <h2>this is test</h2> );
}
}
export default Test;
Example 2: react tsx component example
import React from 'react';
interface Props {
}
const App: React.FC<Props> = (props) => {
return (
<div><div/>
);
};
export default App;
Example 3: TYPESCript props class component
class Test extends Component<PropsType,StateType> {
constructor(props : PropsType){
super(props)
}
render(){
console.log(this.props)
return (
<p>this.props.whatever</p>
)
}
};
Example 4: state in react typescript
interface IProps {
}
interface IState {
playOrPause?: string;
}
class Player extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
playOrPause: 'Play'
};
}
render() {
return(
<div>
<button
ref={playPause => this.playPause = playPause}
title={this.state.playOrPause}
>
Play
</button>
</div>
);
}
}
Example 5: how to use class component in typescript react
import React, { Component } from 'react';
type Props = { head ?: string , age ?: number };
type State = { num: number };
type DefaultProps = { head : string, age : string }
class Counter extends Component <Props, State, DefaultProps> {
static defaultProps : DefaultProps = {
head: "Heading is Missing",
age: "Age is missing",
};
state: State = {
num: 0,
};
render() {
const add = () => this.setState({ num: this.state.num + 1 }) ;
return (
<div>
<h1> { this.props.head } </h1>
<p> Age: { this.props.age } </p> <br />
<h3> { this.state.num } </h3>
<button onClick={add}>Add 1</button>
</div>
);
}
}
export default Counter;