score:2

Accepted answer

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>


Related Query

More Query from same tag