What is the difference between state and props in react

by

In React, props (short for “properties”) and state are both plain JavaScript objects that hold data that affects a component. However, there are some important differences between the two state and props:

  1. Props are passed to a component from its parent and are used to configure the component. They are typically used to provide data that is needed for a component to render.
  2. A State is local to a component and is used to track changes to a component’s data. It is managed within the component itself and can be changed by events or actions that occur within the component.
  3. Props are read-only and cannot be modified by the component. If a parent component needs to update a prop, it must pass a new prop value to the child component. On the other hand, state can be modified by the component, and the component can also update its own state in response to user interactions or other events.
  4. Props are generally used to pass data down the component hierarchy, while state is used to manage data within a component.

Here is an example of how props and state might be used in a simple React component:

import React from 'react';

class MyComponent extends React.Component {
  // Initialize state
  state = {
    count: 0,
  };

  // This method is called when the button is clicked
  handleClick = () => {
    // Update the component's state
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <button onClick={this.handleClick}>Click me</button>
        <p>You have clicked the button {this.state.count} times.</p>
      </div>
    );
  }
}

// Render the component and pass a title prop to it
ReactDOM.render(
  <MyComponent title="My React Component" />,
  document.getElementById('root')
);

In this example, the MyComponent component has a state object with a single property called count, which is initialized to 0. The component also has a handleClick method that increments the count state when the button is clicked. The component’s render method displays the title prop that was passed to it from its parent, and also displays the current value of the count state.

Leave a Comment