React TypeScript Parent - Child components example

In the previous post we saw a React class component written in TypeScript, the component had state support and event handling (button click event and text change event). The component has a textbox and a button, we handle the onChange event of the textbox set the value in the name state property. We capture the onClick event of the button and set a greeting text in the message state object, this message is displayed in the screen

In this post we will alter this component a bit so that the greeting message is passed as a property from the parent component.

Before we move to the components let us create an interface.ts file which will hold the interface structure for the State and Props used in the components.

export interface HomeProps {

    greeting: string

}

export interface HomeState {

    message: string;

    name: string;

};

Next we will rewrite the Home component such that it receives the greetings message from the parent component. Notice that the component receives HomeProps when initializing.

import * as React from 'react';

import {HomeProps, HomeState} from '../interfaces';

export default class Home extends React.Component<HomeProps> {

  state: HomeState = {

    name : "",

    message: ""

  };

  handleChange = (event : any) => {

    const { value } = event.target;

    this.setState(() => {

      return {

        name : value

      };

    });

  }

  SetGreeting = () => {

    this.setState({

        message: (`Hello ${this.state.name}, ${this.props.greeting}`)

    });

  };

  render () {

    return (

      <div className="container">

          <div className="row">

                <div className="col-md-4"> </div>

           </div> 

          <div className="jumbotron">                    

            <div className="row">

                <div className="col-md-4">

                    <input type="text"

                        onChange={this.handleChange}

                        value={this.state.name} />  

                    <button onClick={this.SetGreeting}

                        className="btn btn-sm btn-primary">Click</button>

                </div>

            </div>  

            <div className="row">

                <div className="col-md-4"> </div>

            </div>                 

            <div className="row">

                <div className="col-md-4">

                    <h5>{this.state.message}</h5>               

                </div>

            </div>   

          </div>             

      </div>

    );

  }

}

Finally the parent component which passes the greetings message as a property to the child component. The component uses the HomeProps interface to define and pass the props to the child component.

import React, { Component } from 'react';

import './App.css';

import Home from './Components/Home';

import {HomeProps} from './interfaces';

function App() {

  var props : HomeProps = {

    greeting : "welcome to React"

  };

 

  return (

    <div className="App">

      <Home {...props} />

    </div>

  );

}

export default App;

The output is as follows.