Life-cycle Events in React JS

Question

1. Life-cycle Events in React JS

• Create a button that will increment the state of a variable count by 1.

• Use anonymous function using arrow function technique in onClick event to call a function handleClick, and update the state of the count variable.

• Use ComponentDidMount, ComponentWillMount,

ComponentDidUpdate, and

ComponentWill Update Life-cycle events, and analyze the order in which they are invoked.

⚫ View the output in the console by inspecting the elements.

Answer

import React, { Component } from 'react';

class App extends React.Component {
  // Initialize the state with a count variable set to 0
  state = {
    count: 0,
  };

  // This function will be called when the button is clicked
  handleClick = () => {
    // Increment the count by 1
    this.setState({ count: this.state.count + 1 });
  };

  // This function is called after the component is mounted
  componentDidMount() {
    console.log('Component did mount');
  }

  // This function is called before the component is mounted
  componentWillMount() {
    console.log('Component will mount');
  }

  // This function is called after the component is updated
  componentDidUpdate() {
    console.log('Component did update');
  }

  // This function is called before the component is updated
  componentWillUpdate() {
    console.log('Component will update');
  }

  // The render function returns the JSX that should be rendered
  render() {
    return (
      <div>
        {/* Display the count */}
        <p>Count: {this.state.count}</p>
        {/* Add a button with an onClick event that calls the handleClick function */}
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}


export default App;