Learn TypeScript 3 by Building Web Applications

Class components accepting props

Let's now take a look at an example component that accepts some props:

import React, {Component} from 'react'; 
 
const defaultProps = Object.freeze({ 
    buttonText: "DEFAULT BUTTON TEXT", 
    messageToDisplay: "DEFAULT MESSAGE", 
}); 
 
type Props = typeof defaultProps; 
 
type State = {}; 
 
export class CustomizableButton extends Component<Props, State> { 
    readonly state = {}; 
    static readonly defaultProps = defaultProps; 
 
    render() { 
        const {buttonText} = this.props; 
        const {messageToDisplay} = this.props; 
 
        return <div> 
            <input type="button" value={buttonText} onClick={() =>             window.alert(messageToDisplay)} /> 
        </div> 
    } 
} 

In this example, the CustomizableButton component accepts two props to be defined: buttonText and messageToDisplay ...