Pass data from input field into variable without submitting - reactjs

Question

Trying to get my head around react. I want to take data from an input field and pass it into a variable (let) so I can then pass it back into the html in a separate string. Would this be 'two way binding'? Does anyone have a simple example of this working?
http://codepen.io/IanHazelton/pen/ygEomV?editors=0110
let name="{name from input}";
let age="{age from input}";
class App extends React.Component {
render() {
return (
<div className ="wrap">
<h1 className="string">What's your name?</h1>
<input type="text" id="name" />
<h1 className="string">How old are you?</h1>
<input type="text" id="age" />
<h1 className="string">Hi {name}! How are you today? You're {age} years old.</h1>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('Root'))

Answer 1

For that you need to use state in App component, Concept is whenever user provide any input in the fields, store those values in state variable, And whenever you make any change in state values, React will render whole component again, try this:
class App extends React.Component {
constructor(){
super();
this.state={name: '', age: ''}
}
render() {
return (
<div className ="wrap">
<h1 className="string">What's your name?</h1>
<input value={this.state.name} type="text" id="name" onChange={(e)=>{this.setState({name: e.target.value})}}/>
<h1 className="string">How old are you?</h1>
<input value={this.state.age} onChange={(e)=>{this.setState({age: e.target.value})}} type="text" id="age" />
<h1 className="string">Hi {this.state.name}! How are you today? You're {this.state.age} years old.</h1>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('Root'))
Check the working example: http://codepen.io/anon/pen/egKyvJ?editors=0110

Answer 2

You need to take advantage of the state of the component. I modified your pen to work with the name property, you can do the same to your other inputs:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
handleNameOnChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div className="wrap">
<h1 className="string">What's your name?</h1>
<input type="text" id="name" value={this.state.name} onChange={ (e) => this.handleNameOnChange(e) } />
<h1 className="string">How old are you?</h1>
<input type="text" id="age" />
<h1 className="string">Hi {this.state.name}! How are you today? You're {age} years old.</h1>
</div>
)
}
}
CodePen