How to use React hooks state from one component to another Component

Question

I am trying to get data from one component to another in react using hooks.

              App.js --
                       |---------Sidebar.js------------
                       |                                   |---SidebarBody.js
                       |
                       |---Chat.js------
                                        |----ChatBody.js

This is my directory tree, in this when a button is clicked in SidebarBody.js hooks state is updated with the input value data and then this state data I have to use in ChatBody.js for further processing. So what can I do for this please tell in reference to react hooks.

I have attached my codes Screen Shot.

In this image I have add my both SidebarBody.js and ChatBody.js component code.

Answer 1

You can try defining all the state you want to pass inside your App.js and just pass it from there. Or you can use context but its slightly more difficult to set up.

Context example