Having Difficulty sending state data on form to different component - reactjs

Question

I understand that this question has been asked many different times. I've looked through many different ones and I'm still having a difficult time understanding it.
I've read many articles online and I know that I need to pass my state to props and I'm having a difficult time doing so. I managed to pass a simple string of test, however I cannot pass my state to props as it simply returns nothing and I'm not sure why if the values on the form get updated in the onchange method.
I also want to avoid using redux as a alternative as I'm trying to learn the basic way first
What I'm trying to do is very simple, user fills out a box that contains ordernumber on the form. They hit submit, redirects to another page where I'll have access to the ordernum they submitted on the input box for the order number.
Here is my code:
simple input form page
/*eslint-disable no-unused-vars*/
import React from 'react';
import ReactDOM from 'react-dom';
class Reloform extends React.Component {
constructor(props){
super(props);
this.state = {
orderNum: "",
errorMsg: ""
}
}
onChange(e){
this.setState({
[e.target.name]: e.target.value
})
}
onSubmit(e){
if(this.state.orderNum === '') {
this.setState({
errorMsg: 'Please enter your order number.'
});
} else {
this.setState({
errorMsg: ''
});
// Submission successful
window.location = '/relotoForm';
}
e.preventDefault();
}
render() {
console.log(this.props)
return (
<div className="container">
// I get message prop back but not orderNum?
<h1>{this.props.message}</h1>
<h1>{this.props.orderNum}</h1>
<div className="reloContainer">
<form
method="POST"
id="reloForm"
onSubmit={e => this.onSubmit(e)}
autoComplete="off"
>
<h1>T/O Form</h1>
{this.state.errorMsg !== '' ? <p style={{color:'#E2231A'}}>Please enter an order number.</p> : ''}
<label>Order #</label>
<input
type="text"
name="orderNum"
className="form-control"
value={this.state.orderNum}
onChange={e => this.onChange(e)}
/>
<button type="submit" className="btn btn primary" id="reloButton" onClick={this.props.updateData}>Submit</button>
</form>
</div>
</div>
)
}
}
export default Reloform;
/* form action page */
/*eslint-disable no-unused-vars*/
import React from 'react';
import ReactDOM from 'react-dom';
import Reloform from './reloForm';
class Relotoform extends React.Component {
render() {
return (
<div>
//The string that I returned works but the state that I try to have access on this page does not. I am not sure why. My assumption is because maybe this.state is referring to the state of this component and not the form component on my form page?
<Reloform message="Works" orderNum={this.state.orderNum} />
</div>
)
}
}
export default Relotoform;

Answer 1

State is local to the component you are accessing. If you want to pass a state value to another component, this is where you use props. So when you are trying to render Reloform in your Relotoform component, when you do orderNum={this.state.orderNum}, you won't get any value as there is no state defined for Relotoform in which there's a variable called orderNum.
You need to update the orderNum through your state in the Reloform. You get message displayed because you are passing the value "Works" as a prop in Relotoform. Then you are accessing it correctly as a prop in Reloform. Adapt a similar arhcitecture for orderNum.