We Keep Coding

I want to pass the value one component to other component

I'm learning reactjs, and I want to pass the data after the onSubmit event to another component to use the data.
For example:
in main.js file component
handleSubmit(e){
var value = this.state.name;
}
Here I want to pass the data to Data.js file
finalData(){
var answer = //value data
}
I have looked at many sources, but I didn't get a proper answer. Thank you

Use props or context to share data between components
In react you pass data between components using props.
Have a look at the documentation here:
https://reactjs.org/docs/components-and-props.html
If your components are not in close proximity in the component hierarchy you can consider using react context.
See the documentation here: https://reactjs.org/docs/context.html

There are many ways to share state in reactjs. For example:
use global state tree, such as mobx
use context, just like redux or native createContext
use common parent to pass props
use hooks API
You can try any of these methods, mobx is simple, redux is industrialized, props is a easy way to share simple private state.

Hook up API results with Redux in react js

I have a search form that fetches data from a api. This is that first time I am using Redux so please excuse my ignorance.
I am able to display the search results in the sidebar without using redux store.
handleSubmit(event) {
event.preventDefault()
get(`api1`, { maxContentLength: 400 })
.then((res) => {
this.setState({SearchItems: res.data})
})
}

There are few steps
Manually you can do using below methods of store object from redux'
below method will dispatch action to reducer
store.dispatch({type: 'GET_RESULTS' , payload: {}})
store.subscribe will receive all actions, you can register callbacks here.
store.getState() using this method you can access current state
you can find full documentation and examples at https://redux.js.org/basics/store example with redux is here redux with react
for react application you may use react-redux package to integrate redux which comes with Provider component with store property
with this you can import your global store object in your index.js file where you are creating App component.
With provider component set now you can use
And use Connect higher order component inside your react component to integrate redux actions to react component. Connect accepts two functions mapStateToProps and mapDispatchToProps functions as arguments and returns higher order component to which you pass your react component.
mapStateToProps functions as its name accepts global state and returns object with properties which then can be accessed from props, and similarly mapDispatchToProps accepts dispatchers to props. below is the example of react component integrated with redux using react-redux.
here is video tutorial react-redux video

React Context API & HOC

I've been reading up on the new context API and have a question regarding using it alongside HOC to inject props instead of directly wrapping every child that needs access to some state with a Consumer.
Isn't the above achievable without context? Isn't it possible to just house some state in a HOC and inject that into wrapped components that need access?

It is possible but each wrapped component will have it's own data passed from HOC. While using context, this data is shared between components.
So changing data in a context will make all Consumers re-render, while HOC will work only for the wrapped component.

The documentation explains the use case where a lot of components need to access the common theme, and hence can be wrapped with an HOC. without the context, you can make use of HOCs state to store the variable and pass on to the components wrapped with HOC but all of these components will have a different instance of the state and won't react to the theme change together.
Context makes it possible to store the data centrally and all listeners/consumers will react to the change together.

How can you create a functional component that updates on Redux store change?

For my application, I want to create a component who's sole purpose is to update when there is a change to the Redux store.
I have achieved this with a componentDidMount() that checks if the component's state matches the store and sets the state if not.
My solution works, and is suitable enough for the situation, but it seems like a lot of code for a simple function.
How can one achieve the same outcome, a component that updates on Redux store change, using a functional component or a more simple stateful component?
Update: Thanks to the comments below, I have a new working the passes state information as props.

React components renders due to changes in props and state, therefore when you connect your component to Redux store
and supply mapStateToProps, when redux store update the mentioned props that you will return from that function, your component will re-render. You can detect changes via componentWillReciveProps life cycle method.

mobx store not accessable inside lifecycle methods?

I have a react component which i am injecting a mobx store. when I try to access an observable from my store inside a lifecycle method (componentWillMount or componentDidMOunt) the value is empty. however when I access it inside the render method it is available. Is there something I am missing? I feel like I'm missing something basic here.

The documentation clearly states that observer from mobx-react tracks observables only in render method of wrapped component.
Function (and decorator) that converts a React component definition,
React component class or stand-alone render function into a reactive
component, which tracks which observables are used by render and
automatically re-renders the component when one of these values
changes.
If you take a look at observer sources you can confirm that it only tracks render method

Hi by my experience with Mobx state management you should not access the
observalbe variables from React Component.
Even when you inject the Redux Store into React Component. (Decorate or wrap).
The computed variables are designed to provide updated observable variables to React Component.
You can access Mobx actions and computed but not the observable. They are used only inside Mobx class.