How to properly implement a component in React?

Question

JavaScript

I decided to study the react in more detail on my own, because I have been sitting on Angular for a very long time, and I am faced with the fact that I don’t understand how to write a component correctly. The prerequisites are:
Let's say I'm making a dropdown component. It has a drop down menu.
Best practice - to make a stupid component that only renders by props, there are no problems with this, I wrote so that showing / hiding the drop-down depends on the props. But then the problem is - you need to manage the menu display state, which means we make a wrapper in the form of a smart component, inside which there is a callback method that twitches when you click on the dropdown title and changes the state. As a result, it turns out such a standalone dropdown, which can be connected anywhere and it is even implemented according to the canons.
Then I thought about what if we want to immediately open the dropdown during initialization, so we need to make the component manageable and not at the same time - I stumbled upon the "uncontrollable" package, connected it, it became even cooler - you can either use the standalone component, which itself monitors its state, or if it is necessary to control from the place where we connect it, we transfer control data through props and steer by dropdown "from above".
Here it could have ended, but quite often such use cases are required: Dropdown hangs somewhere in one part of the page, and the dropdown control button is in another part of it, and the only thing they have in common is the root element in a couple of jumps "up" from each of them. In this case, the dropdown must be uncontrollable, i.e. store your state in yourself and independently switch the display of your menu, BUT, when you click on the above button, it should, for example, open, regardless of its state (hidden / hidden).
And I don't understand how to implement it. if you make a controlled component from the outside, then you have to write logic, which means that other components will know a lot about it. From what I worked with, I could offer two implementations of this:

• A component dropdown has a public api with show() and hide() methods, and a callback is received through props, into which an object with api is given.
  
• react-way, Ref is used, through which the desired method twitches. The downside of this approach is that the whole ins and outs of the component with giblets is given through the ref, and the use of refs in this context seems to me very bad practice
  

Intuition tells me that there is some very simple solution.
I know that this could be solved by redux, but I would like to know how to write it on a more or less pure react, and I want this solution to be just standalone, i.e. so that you can take this component and add it to another project, which may not have MobX or Redux. Again, interesting is such a solution that in a more or less large company the review code is not wrapped with the words "yes, you have a crutch", I want an enterprise one, what you write every day at work.
If there are any articles on a similar topic, I will be very happy with the links.

Answer 1

I would recommend using redax. It is not at all necessary to make the component itself dependent on the redax. The desired prop from the state can be read by its immediate ancestor.
If you go without redax, then you will probably have to pass the necessary props to the common ancestor. Both options with method forwarding complicate the problem too much, in my opinion.
Or make some kind of universal service class (angular-way, so to speak), which will store the state of this dropdown and provide an API to it. In general, this use case is quite specific, and if you want to create a reusable component, then you already have everything you need - you can stop there. All of these tricky use cases are the problem of who will be using the component, not the developer of the component.