In React how to PROPERLY pass input value from child to parent - reactjs

Question

I have a simple code in [sandbox][1] and below
[1]: https://stackblitz.com/edit/react-72dprn to pass input form value to child to parent but something is wrong and the value didn't get passed.
This is the app.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Form from './form'
class App extends Component {
constructor() {
super();
this.state = {
value: ""
};
}
handleSubmit = e=>{
this.setState({
value=e.target.value
})
}
render() {
return (
<div>
<Form onSubmit={this.handleSubmit}/>
</div>
);
}
}
render(<App />, document.getElementById('root'));
And the Form.js
import React, { Component } from 'react';
class form extends Component {
render() {
return (
<form className="replyForm" onSubmit={this.props.onSubmit}>
<input />
<button type="submit" className='btn btn-success'>Submit</button>
</form>); } }
export default form;
Any help greatly appreciated!

Answer 1

There are so many mistakes in your code. You should read the react docs properly
First of all you are setting your state incorrectly -
handleSubmit = e=>{
this.setState({
value: e.target.value //this is an object don't assign a value//
})
}
Second - In your form.js your component starts with a lowercase. React components start with an uppercase -
class Form extends Component {
render() {
return (
<form className="replyForm" onSubmit={this.props.onSubmit}>
<input />
<button type="submit" className='btn btn-success'>Submit</button>
</form>); } }
export default Form;
Now coming to your original question, To pass the value of input to child you need to pass it as props and use it in child as props -
<Form onSubmit={this.handleSubmit} inputValue={this.state.value} />
In your child component access that value as this.props.value.