Class Componant AA.js BB.js

 AA.js

import React, { Component } from "react";
import BB from "./BB";

export default class AA extends Component {
    constructor() {
        super();
        this.state = {
            data: "ABC",
            name: "Prem",
        };

        // Bind the UpdateName method
        this.UpdateName = this.UpdateName.bind(this);
    }

    UpdateName(v) {
        console.log("AA " + v);
        this.setState({ name: v }); // Dynamically set the state based on the input value
    }

    render() {
        return (
            <>
                <h1>AA</h1>
                <input
                    value={this.state.name}
                    onChange={(event) => this.setState({ name: event.target.value })}
                    placeholder={"Please input name"}
                />
                <h1>{this.state.name}</h1>
                <hr />
                <BB name2={this.state.name} UpdateName={this.UpdateName} />
            </>
        );
    }
}

BB.js

import React from "react";

export default class BB extends React.Component {
    render() {
        return (
            <>
                <h1>BB</h1>
                <input
                    value={this.props.name2}
                    onChange={(event) => this.props.UpdateName(event.target.value)}
                    placeholder={"Please input name"}
                />
                <h1>{this.props.name2}</h1>
            </>
        );
    }
}