How will you update props in React?

In React, props are typically treated as immutable data. That is, the props received by a component should be treated as read-only properties and should not be modified directly. If you need to update the component's state or behavior based on changes to props, there are several approaches:

1. Using State to Respond to Prop Changes

A common pattern is to use state within the component to reflect data passed from props. When props change, update the internal state using lifecycle methods or Hooks.

For example:

jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue
    };
  }

  // When props change, update state
  static getDerivedStateFromProps(props, state) {
    if (props.initialValue !== state.value) {
      return {
        value: props.initialValue
      };
    }
    return null;
  }

  render() {
    return <div>{this.state.value}</div>;
  }
}

For functional components, use the useEffect Hook:

jsx
function MyComponent({ initialValue }) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  return <div>{value}</div>;
}

2. Updating Props via Parent Component

Since props are managed by the parent component, any updates to props should be performed through the parent component. This typically involves using state in the parent component and passing these state values as props to the child component. When updating props, it's actually updating the parent component's state.

For example:

jsx
class ParentComponent extends React.Component {
  state = {
    value: 0
  };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  }

  render() {
    return (
      <div>
        <MyComponent initialValue={this.state.value} />
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

Here, MyComponent receives initialValue as props, and when the "Increase" button is clicked, ParentComponent updates its state, causing MyComponent's props to change.

3. Callback Functions

In some cases, a child component needs to notify the parent component to update its internal state. This can be achieved by passing a callback function as a prop to the child component and invoking it within the child component.

For example:

jsx
function MyComponent({ value, onValueChange }) {
  return <input type="text" value={value} onChange={e => onValueChange(e.target.value)} />;
}

class ParentComponent extends React.Component {
  state = {
    value: ''
  };

  handleValueChange = newValue => {
    this.setState({ value: newValue });
  }

  render() {
    return <MyComponent value={this.state.value} onValueChange={this.handleValueChange} />;
  }
}

In summary, all approaches to updating props in React involve the parent component. Whether it's indirectly modifying props by updating the parent's state or directly notifying the parent via callback functions, directly modifying props is an anti-pattern and should be avoided.