TIL - React Forms and More

February 04, 2020

What follows is notes from a class. Incomplete thoughts & code that probably will only make sense to me. Given enough time, even that may be a stretch! Reference at your own risk 😂

Slides

Today we covered a few React Topics including:

  • Refs to interact with DOM elements (demo)
  • Portals to affect DOM elements outside of the React elements (demo)
  • Error boundaries for more useful error handling/debugging(demo)
  • How React hooks work and why you use them (demo)
  • And lastly, forms and controlled components…

Form Control In React

A demo I made is here. This early version of this pen works like a normal HTML form:

class MyForm extends React.Component {
  constructor(props){
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleSubmit(event) {
    event.persist();
    event.preventDefault();
    const form = event.target;
    console.log('FORM ELEMENT: ', form);
    const data = new FormData(form);
    const values = Object.fromEntries(data);
    console.log('FORM VALUES: ', values)
  }
  
  render(){
    return(
      <form onSubmit={this.handleSubmit}>
        <input name="firstName" type ="text" />
        <input name="lastName" type ="text" />
        <button>Submit</button>
      </form>
    );
  }
};

Later we updated this to handle the form elements the React way, seen in the current pen.

Formik

Because handling forms this way can be cumbersome there are React libraries to do a lot of this work for you. We looked at Formik and implemented it into a demo app.

Tags icon Stacked price tag looking things Tags: