React State vs Props: Key Concepts and Examples

STATE

In React, a State is an object that holds the data and behavior of a component. It represents the current state of the component and can be updated over time.

State is typically initialized in the constructor of a class component using the this.state property. For example, the following code initializes a state object with a property count set to 0:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  //...
}

Once the state is initialized, it can be accessed and modified using this.state

coderender() {
  return (
    <div>
      <p>Count: {this.state.count}</p>
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Increment
      </button>
    </div>
  );
}

In the above example, the render method of the counter component displays the current value of the count property in the state object. When the button is clicked, the setState method is called to update the state object with a new value for the count property, causing the component to re-render with the updated state.

It is important to note that the state should be treated as immutable, and should only be updated using the setState method. Directly modifying the state object can lead to unpredictable behavior and should be avoided.

PROPS

In React, Props (short for "properties") are used to pass data and configuration information from a parent component to a child component. Props are read-only, meaning that a child component cannot modify the values passed to it through props.

Here is an example of how props are used to pass data from a parent component to a child component:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

In this example, the Greeting component is a child of the App component. The name prop is passed to the Greeting component with a value of "Alice" in the first instance, and "Bob" in the second instance. The Greeting component then uses the name prop to display a personalized greeting.

Props can also be used to pass functions from a parent component to a child component, which the child component can then use to communicate with the parent component. This is commonly used in event handling, where a child component needs to notify its parent that an event has occurred.

class Button extends React.Component {
  handleClick = () => {
    this.props.onClick();
  };

  render() {
    return <button onClick={this.handleClick}>{this.props.label}</button>;
  }
}

function App() {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <div>
      <Button label="Click me" onClick={handleClick} />
    </div>
  );
}

In this example, the Button component receives a prop onClick which is a function that logs a message to the console. When the Button is clicked, it calls the onClick function which was passed to it through props.

DIFFERENCE

The main difference between state and props in React is that state is managed and updated within a component, while props are passed down from a parent component to a child component.

State is an object that represents the current state of a component and is initialized and updated using the this.setState() method. State can only be accessed and updated within the component it belongs to, and can trigger a re-render of the component and its children when it is updated.

Props, on the other hand, are read-only and passed from a parent component to a child component. Props are used to configure a component and provide it with the necessary data to render. When a parent component updates a prop, the child component receiving the prop will re-render with the new data.

Consider the above example to illustrate the difference between state and props:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <Button onClick={this.handleClick} />
      </div>
    );
  }
}

function Button(props) {
  return <button onClick={props.onClick}>Click me</button>;
}

In this example, the Counter component has a state object that stores a count value. The handleClick function is used to update the count when the button is clicked, triggering a re-render of the Counter component.

The Button component receives an onClick prop from the Counter component, which is a function that updates the count value in the Counter component's state. When the button is clicked, the onClick function is called and the Counter component's state is updated, causing a re-render.

In summary, State is used to manage and update data within a component, while Props are used to pass data from a parent component to a child component.