Revision history [back]

To implement React Hooks to concentrate on the parent's perspective from a child's perspective, you can use the useContext hook.

1. First, create a Context object in a separate file, such as "ParentContext.js".

import React from 'react';

const ParentContext = React.createContext();

export default ParentContext;

1. In the parent component, pass down the state and setState function through the Provider component:

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

const ParentComponent = () => {
  const [parentState, setParentState] = useState('parent state');

  return (
    <ParentContext.Provider value={{ parentState, setParentState }}>
      <ChildComponent />
    </ParentContext.Provider>
  );
};

export default ParentComponent;

1. In the child component, use the useContext hook to access the parent's state and setState function:

import React, { useContext } from 'react';
import ParentContext from './ParentContext';

const ChildComponent = () => {
  const { parentState, setParentState } = useContext(ParentContext);

  const handleOnClick = () => {
    setParentState('new parent state');
  };

  return (
    <div>
      <p>Parent state from child component: {parentState}</p>
      <button onClick={handleOnClick}>Update Parent State</button>
    </div>
  );
};

export default ChildComponent;

In this example, the ParentComponent passes down the parentState and setParentState functions through the ParentContext Provider. The ChildComponent accesses these values through the useContext hook and can update the parent's state from within the child component.