You are not changing state in right manner, Code for change state will be like this this.setState({ showCart: true}) Replace handleClick function from below code.

 handleClick() {
    this.setState({ showCart: true}) 
    console.log("button clicked")
  }

If your new state update depends on the previous state, always use the functional form of setState which accepts as argument a function that returns a new state.

In your case:

this.setState(prevState => ({
  check: !prevState.check
}));

See docs

Since this answer is becoming popular, adding the approach that should be used for React Hooks (v16.8+):

If you are using the useState hook, then use the following code (in case your new state depends on the previous state):

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => !prevCheck);

Update [May 2023]:

Relevant section in docs: https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state

Put the condition like this:

onClick={canClick ? this.handler : undefined }

Working Code:

class App extends React.Component {
  
   _click(){
      // it will not print the value
      console.log('yes');
   }

   render(){
      return (
        <div>
          <div onClick={false ? this._click : undefined }>Click</div>
        </div>
      )
   }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

You are overriding the definition of toggle with this code : const [toggle] = useAudio(url);. The Player.js has multiple declarations and definitions of toggle. See:

 const toggle = () => {
      setPlaying(!playing);
      playing ? audio.play() : audio.pause()
      console.log("audio is playing" + toggle);
     };
  
    return [playing, toggle];
  };

..
...
..
const [toggle] = useAudio(url);

Hence the Error Expected OnClick to be a function but provided a boolean

Whenever you want to pass a prop to a child component (Main) from your parent component (Category) you pass it in render() function as:

render(){
  <Main
   isOpen={this.state.isOpen}
  />
}

But i don't see you importing the child component (Main) at all or using it in the render function of your parent component (Category).

You need to use a child component in parent's render function in order to pass the state (and even props) of Parent component to its child component.

You can get more info from the React Docs as well.

https://facebook.github.io/react/docs/components-and-props.html

Normal OOP design principles don't always apply directly to React components. Components don't usually have instance properties, they mostly just have props and state (there are a few exceptions where you do use an instance property, like Animation objects in react-native, but these are rare).

You're kind of mixing the two things in a way that doesn't quite make sense here. Settings is a React component that renders an image, but it's also an object which you instantiate by calling new Settings(). If there are other components which depend on the value of flag, you might want to separate the accessing and storing of the flag from the render component, passing a value and a callback to the renderer.

const Settings = ({setFlag}) => {
      return(
          <img src="./img/leaf.png" alt="" onClick={() => setFlag(true)}/>
      );
}

You've suggested that you like the Context API as a solution for making the flag value globally available. There are a few ways to set this up, but here's one.

Outside of any component, we create a FlagContext object that has two properties: a boolean value flag and callback function setFlag. We need to give it a default fallback value, which is hopefully never used, so our default callback just logs a warning and does nothing.

const FlagContext = createContext<FlagContextState>({
  flag: false,
  setFlag: () => console.warn("attempted to use FlagContext outside of a valid provider")
});

This FlagContext object gives up Provider and Consumer components, but it's up to us to give a value to the FlagContext.Provider. So we'll create a custom component that handles that part. Our custom FlagProvider uses a local state to create and pass down the value. I've used a function component, but you could use a class component as well.

const FlagProvider = ({children}) => {
  const [flag, setFlag] = useState(false);

  return (
    <FlagContext.Provider value={{
      flag,
      setFlag
    }}>
      {children}
    </FlagContext.Provider>
  )
}

We want to put the entire App inside of the FlagProvider so that the whole app has the potential to access flag and setFlag, and the whole app gets the same flag value.

When you want to use the value from the context in a component, you use either the useContext hook or the Consumer component. Either way, I like to creating an aliased name and export that rather than exporting the FlagContext object directly.

export const FlagConsumer = FlagContext.Consumer;

export const useFlagContext = () => useContext(FlagContext);

With the Consumer, the child of the consumer is a function that takes the value of the context, which in out case is an object with properties flag and setFlag, and returns some JSX.

This is usually a function you define inline:

const SomePage = () => {
  return (
    <FlagConsumer>
      {({flag, setFlag}) => (<div>Flag Value is {flag.toString()}</div>)}
    </FlagConsumer>
  )
}

But it can also be a function component. Note that when using a function component as the child, you must pass the component itself ({Settings}) rather than an executed version of it (<Settings />).

const Settings = ({ setFlag }) => {
  return <img src="./img/leaf.png" alt="" onClick={() => setFlag(true)} />;
};

const SomePage = () => {
  return <FlagConsumer>{Settings}</FlagConsumer>;
};

The preferred method nowadays is with hooks. We call useFlagContext() inside the body of the function component and it returns our context object.

const SomePage = () => {
  const {flag, setFlag} = useFlagContext();

  return <Settings setFlag={setFlag}/>
};

Both the consumer and the hook only work if they are inside of a flag context provider, so that's why we put it around the whole app!

const App = () => {
  return (
    <FlagProvider>
      <SomePage />
    </FlagProvider>
  );
};

Complete example on CodeSandbox