I want to access parent useState in child component-CodePudding

import React, { useState } from "react";

const Sidebar = ({ sidebarActive, setSidebarActive }) => {

 return (
    <>
      {/* Hamburger button */}
      <button
        className={
          sidebarActive
            ? "hamburgerButton sidebar-oepn"
            : "hamburgerButton sidebar-closed"
        }
        type="button"
        onClick={() => setSidebarActive(!sidebarActive)}
      >
        <i className="fa fa-fw fa-bars" />
      </button>
   </>
  );
};

export default Sidebar;

when i run i encounter with following error

Compiled with problems:

ERROR


src\components\VerticalLayout\Sidebar.js
  Line 6:20:  'sidebarActive' is missing in props validation     react/prop-types
  Line 6:35:  'setSidebarActive' is missing in props validation  react/prop-types

Search for the keywords to learn more about each error.

if i do the following, i do not encounter with any error but i also didn't get access to parents useState value

const Sidebar = (props, { sidebarActive, setSidebarActive }) => {

CodePudding user response：

Your first implementation is correct but it showed errors because of this prop types validation.

According to those errors, your component is lacking PropTypes. You need to set it like below

import React, { useState } from "react";
import PropTypes from 'prop-types';

const Sidebar = ({ sidebarActive, setSidebarActive }) => {

 return (
    <>
      {/* Hamburger button */}
      <button
        className={
          sidebarActive
            ? "hamburgerButton sidebar-oepn"
            : "hamburgerButton sidebar-closed"
        }
        type="button"
        onClick={() => setSidebarActive(!sidebarActive)}
      >
        <i className="fa fa-fw fa-bars" />
      </button>
   </>
  );
};

//set prop types
Sidebar.propTypes = {
   sidebarActive: PropTypes.bool,
   setSidebarActive: PropTypes.func
}

export default Sidebar;

CodePudding user response：

You just need to validate the props with propTypes:

Here is a working snippet