import React, { Component } from "react";

// Child component

class Child extends Component {

  render() {

    return <button onClick={() => this.props.handleClick("Manasi")}>Say Hello</button>;

  }

}

// Parent component demonstrating lifecycle

class App extends Component {

  constructor() {

    super();

    this.state = { count: 0 };

  }

  componentDidMount() {

    console.log("App Mounted");

  }

  componentDidUpdate() {

    console.log("App Updated");

  }

  componentWillUnmount() {

    console.log("App Will Unmount");

  }

  handleClick = (name) => {

    alert(`Hello, ${name}!`);

    this.setState({ count: this.state.count + 1 });

  };

  render() {

    return (

      <div>

        <h2>React Function Argument & Lifecycle</h2>

        <p>Button clicked {this.state.count} times</p>

        <Child handleClick={this.handleClick} />

      </div>

    );

  }

}

export default App;