How to pass static data from one component to another in React? - reactjs

Question

I have a plans component where I define the plan type, and I redirect to sign up component. I want to be able to show the plan type that the user has chosen, in my signup component?
I am trying to update the state like this:
export default class Plans extends Component {
constructor(props) {
super(props)
this.state = {
planType: '',
};
}
render() {
return (
<div>
<div className="billing_freq">Billed Monthly</div>
<form action="pro-invitation" method="post">
<input type="hidden" name="plan_type" value="monthly_pro" /> //I want to show this in signup
<div className="select_btn">
<input type="submit" name="submit" onClick={() => this.setState({planType: "monthly_pro"})} value="Invitation only" />
</div>
</form>
Signup: // a separate component
<label className="container"><span className="plan_name"></span> //PLAN TYPE HERE
</label>
class App extends Component {
render () {
return (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path='/plans' component={Plans} />
<Route exact path='/signup' component={Signup} />
</Switch>
</div>
</BrowserRouter>

Answer 1

How are you going to render Signup Component?
If from the routing, then there will be different way to achieve it and if you're using as a child component the pass as props like this -
<SignUp planType={this.state.planType} />
and access in Signup component as
<label className="container"><span className="plan_name"></span>{this.props.planType}
</label>

Answer 2

You want to give your planType state to the child component.
You can do this by doing this:
<Signup planType={this.state.planType} />
To use this in your child component use the props that you received from the parent, which is your planType state.
<label className="container"><span className="plan_name"></span>{this.props.planType}</label>