How to send strings to another page in react.js - reactjs

Question

I am trying to build a website where the user must choose a size and I want the size to go into the form but the size is undefined
this is my code so far
StartPage.js
class StartPage extends React.Component{
render() {
return (
<div>
<h3>Start Page</h3>
<dir>
<Size size="small" /><Size size="medium" /><Size size="large" />
</dir>
</div>
);
}
}
Size.js
const Size = ({size}) => {
console.log(size);
return(
<Link to="/contact" size={size}>
Choose this if you want a
<br/> {size}
<br/>package
</Link>
);
}
Form.js
const Form = ({ size }) => {
console.log(size);
return (
<div>
<h3>Form</h3>
<input value={size}/>
<button>submit</button>
</div>
);
}
In Size.js it works fine, but as soon as i click on one of then I get an undefined to the form, how do I fix this?
I have tried to make a constructor(props) but that gives me the same result..
UPDATE
Startpage.js
class StartPage extends React.Component{
constructor(){
super();
this.state = {PRODUCTS}
}
render() {
return (
<div>
<h3>Start Page</h3>
<dir>
{PRODUCTS.map((sizes, i) => {
return <Size key={i} size={PRODUCTS[i].size} />
})}
</dir>
</div>
);
}
}
export default StartPage;
Size.js
class Size extends React.Component {
constructor(props){
super(props);
this.state = {
size: this.props.size,
id: this.props.id
}
}
selectedSize(size, id){
this.setState = size.size;
}
render(){
const {size, id} = this.props;
return(
<Link to="/contact"
size={size}
onClick={() => this.selectedSize({size})}
>
Choose this if you want a
<br/> {size}
<br/>package
</Link>
);
}
}
export default Size;
Form.js
class Form extends React.Component {
constructor(props){
super(props);
this.state = {size: this.props.size};
this.setState = this.props.size;
}
render(){
return (
<div>
<h3>Form</h3>
<input value={this.props.size}/>
<button>submit</button>
</div>
);
}
}
export default Mail;
I have added an array and a constructor and I now as before get 3 buttons, but I still don't get the value to the form, I know that selectedSize gets the size clicked on, but it does not get printed on the form.

Answer 1

I would recommend making the size part of the Link's URL:
<Link to={`/contact/${size}`}>
Then in your React Router (we add two routes in order to handle the route without a size, too):
<Route path="/contact/:size" exact render={(props) => contactRoute(props)} />
<Route path="/contact" exact render={(props) => contactRoute(props)} />
Then make contactRoute in the same file as this Route:
const contactRoute = ({match}, props) => {
if(match && match.params && match.params.size) {
const size = match.params.size;
return <Form size={size}/>
}else{
return <Form/>
}
}
This will then make the size available as a prop in the Form component (as long as it is in the URL, e.g. /contact/small).
Here is an example of this:
https://github.com/revolution0x/society0x/blob/master/client/src/components/PageContainer.js

Answer 2

You need to pass "size" to Form.js but you did not do that. So its expected behaviour that its undefined.
Use state management like (redux,mobx etc.)
You could pass props to compnent using "Route"
example:
<Route exact path="/contact" component={() => <Form size="any String you want" />} />