Parent to child communication

 User.js is parent component write below code in it

import React from "react";

import Address from "./Address";

class User extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      name: "NIT",

      city: "chennai",

      email: "NIT@gmail.com",

      state1: "TN",

    };

  }

  updateState = () => {

    this.setState({

      name: "Kabir",

      email: "Kabir@gmail.com",

      city: "Hyd",

      state1: "Ts",

    });

  };

  render() {

    return (

      <div className="container mt-5">

        <div className="row">

          <div className="col">

            <div className="card">

              <div className="card-header bg-primary text-white">

                <h2>User Component</h2>

              </div>

              <div className="card-body">

                <p>Name:{this.state.name}</p>

                <p>Email:{this.state.email}</p>

              </div>

              <div className="card-footer">

                {/* <Address data={this.state} /> */}

                <Address city={this.state.city} state={this.state.state1} />

                <button

                  className="btn btn-outline-primary mt-3"

                  onClick={this.updateState}

                >

                  Update Data

                </button>

              </div>

            </div>

          </div>

        </div>

      </div>

    );

  }

}

export default User;

Address.js is child component & write following code in it

import React from "react";

class Address extends React.Component {

  constructor(props) {

    super(props);

  }

  render() {

    return (

      <div className="container mt-5">

        <div className="row">

          <div className="col">

            <div className="card">

              <div className="card-header bg-success text-white">

                <h2>Address Component</h2>

              </div>

              <div className="card-body">

                <p>City:{this.props.city}</p>

                <p>State:{this.props.state} </p>

                {/* <p>City:{this.props.data.city}</p> */}

              </div>

            </div>

          </div>

        </div>

      </div>

    );

  }

}

export default Address;

Note: We are transferring parent state data to child through props. Hence only parent component has state

PostedBy: pankaj_bhakre