React js change child component’s state from parent component

React.js is a popular JavaScript library used for building user interfaces. One common challenge that developers face is how to change a child component’s state from a parent component. In this blog post, we will explore two solutions to this problem.

Solution 1: Using Props

The first solution involves passing a function as a prop from the parent component to the child component. This function can then be used in the child component to update its state.

Here’s an example:

// Parent.js

import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [childState, setChildState] = useState('');

  const updateChildState = (newState) => {
    setChildState(newState);
  };

  return (
    

      
      Child state: {childState}
    
  );
};

export default Parent;

// Child.js

import React, { useState } from 'react';

const Child = ({ updateChildState }) => {
  const [childState, setChildState] = useState('');

  const handleClick = () => {
    const newState = 'New State';
    setChildState(newState);
    updateChildState(newState);
  };

  return (
    

      Update Child State
      Child state: {childState}
    
  );
};

export default Child;

In this example, the parent component (Parent.js) passes the updateChildState function as a prop to the child component (Child.js). When the button is clicked in the child component, it updates its own state and calls the updateChildState function to update the parent component’s state as well.

Solution 2: Using Refs

The second solution involves using refs to directly access the child component’s state from the parent component.

Here’s an example:

// Parent.js

import React, { useRef } from 'react';
import Child from './Child';

const Parent = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    const newState = 'New State';
    childRef.current.updateState(newState);
  };

  return (
    

      Update Child State
      
    
  );
};

export default Parent;

// Child.js

import React, { useState, forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  const [childState, setChildState] = useState('');

  useImperativeHandle(ref, () => ({
    updateState(newState) {
      setChildState(newState);
    }
  }));

  return (
    

      Child state: {childState}
    
  );
});

export default Child;

In this example, the parent component (Parent.js) uses the useRef hook to create a reference to the child component (Child.js). When the button is clicked in the parent component, it calls the updateState function on the childRef to update the child component’s state.

Both solutions provide a way to change a child component’s state from a parent component in React.js. Choose the solution that best fits your specific use case and coding style.

That’s it! We’ve explored two solutions to the problem of changing a child component’s state from a parent component in React.js. By using props or refs, you can easily achieve the desired functionality in your React.js applications.