Retrieve form input and use it within a string - reactjs

Question

I am trying to take input values from a form and output the results within a string. I don't want to use a database to do so.
Is this possible? Do I have to run the variables through a function? If so how can I go about it?
I'm new to react so providing pseudo-code could possibly make this more difficult than it needs to be but I will do my best.
<div className="form">
<form
name="contact"
method="POST"
>
//variable name
<input name="name" placeholder="Your Name" type="text" />
//variable age
<input name="age" placeholder="Your Age" type="number" />
//submit
<button>Send</button>
</form>
</div>
Based on the form above I expect to be able to somehow fetch the input values in the form after submit and have them display within a string.
Ex: Your name is "name" and your age is "age".
The result would be displayed on the same page if possible.
Thank you in advance for any help provided.

Answer 1

I could write you a bunch of theories, facts, and opinion-based statements.
Instead of that, I've chosen to write down the code. Look at the comments for more insight into the workflow, and if you have any questions, I'll be here to provide help.
Run the code snippet and see ti in action.
class FormComponent extends React.Component {
constructor(props) {
super(props);
this.state = {name: '', age: null, submitted: false}; // Here we're saving our input values
}
// Let's handle the input changes
// This is a great approach, since we don't need to write multiple 'onChange' handlers.
// Depending on what's the current 'name' of the input, we're assigning the currently entered value.
// We're accessing it via the 'e' -event parameter that's automatically passed to us
handleChange = (e) => {
this.setState({[e.target.name]: e.target.value});
}
// This is our onSubmit handler
handleSubmit = (e) => { // same e parameter
const { name, age, submitted } = this.state; // here we're doing a bit od es6 destructuring
// Instead of showing that 'alert' we'll change the 'submitted' part of the state to true. This check is going to be useful when we come to the part where we want to check if the user has clicked the button if YES, this part will be equal to true and we'll show them the output if not, nothing will be shown.
// alert(`Your name is ${name} and you're ${age} years old`);
this.setState({ submitted: true });
e.preventDefault();
}
render() {
// Here we're doing that destructuring again.
// So, later on we can use e.g. 'name' inseatd of 'this.state.name'
const { name, age, submitted } = this.state;
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Name:{' '}
<input
/* This the above used 'name' property -> e.target.name */
name='name'
type="text"
/* Setting the current value from the current
state value and making this into a controlled
form which is what we want 99% of the time */
value={this.state.name}
/* Here we are passing in a reference to our
'handleChange' functions to the built-in
'onChange' method */
onChange={this.handleChange}
required />
</label>
<br />
<br />
<label>
Age:{' '}
<input name="age"
type="number"
value={this.state.age}
onChange={this.handleChange}
required />
</label>
<br />
<br />
<input type="submit" value="Submit" />
</form>
<br />
{/* Here will be our output. What we're doing here is checking if the FORM was submitted.
//If that's true then we want to show our newly created string, but if not, we don't want to show anything in that case -> 'null' */}
{submitted ? <p>{`Your name is ${name} and you are ${age} years old.`}</p> : null}
</div>
);
}
}
ReactDOM.render(
<FormComponent />,
document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>