Forms using React.js

Forms using React.js

There are a ton of topics to talk about when we discuss React. What are the nuances that differentiates plain vanilla JavaScript from React and how do you utilize React’s full potential. Assuredly, it is continuous learning and no matter how skilled and knowledgeable you are, you still have something to learn. Being relatively new to React.js, I would love to share some great nuggets learnt over time. Today, we start with forms.

React forms are controlled components, similar to but unlike regular JavaScript forms. While react forms are controlled components, JavaScript forms are uncontrolled components. Here are a few things to know about React forms.

Converting uncontrolled forms to controlled (React) forms.

  1. Create state
  2. Hoot state to text input
  3. Control form submission.

The above is a simplified summary that gives you the picture pf what you need to do to have a controlled form. To be able to achieve this, here are a few more learning points you need to know;

  • React forms uses onChange event handler and a value prop.
  • It directly affects local state
  • Validate form for submission by enabling submit button only when form is valid.


Here is a breakdown of the learning points listed above.

React form hooks the state to the text input using 2 props. One react hook forms use is the value prop, and it converts the state input to controlled. Then, the onChange event receives all the keystroke changes to update the input.

Creating the submit button requires that the submit button default behavior is disabled. Default form action is normally activated when the submit button is pressed on a regular form. In an uncontrolled form, activating the submit button triggers a get request to root and a page refresh.

On traditional JavaScript forms, you will return false on the onSubmit attribute to disable the default refresh after calling the root of the server. But in React, you use the even property you get as a parameter in the onsubmit callback and calling prevent default on it.

Writing it simply looks like this;

const handleSubmit = (e) => {

e.preventDefault();

console.log("Form submitted!");

}

(P.S., The above is a very summarized version of some important things I've learnt about React Forms. There is a world of information not inclusive in this article

P.P.S., You are very welcome to ask questions and make suggestions, observations, and corrections. I am open to learning and answering questions. Also, you can contribute and answer quetions too if you know the answers! Thank you.)

要查看或添加评论,请登录

Oludare O.的更多文章

  • React: A Technical Interview with Meta.AI

    React: A Technical Interview with Meta.AI

    History Meta.ai landing page Mock Interview by: Oludare Owolabi You Simulate a mock interview, start by asking me some…

  • Journey of a newbie.

    Journey of a newbie.

    Personal development, growth, consistency, determination, and flair. I have noticed that what one knows would always be…

    2 条评论
  • Code choices: Why this Language?

    Code choices: Why this Language?

    Since this series is meant to give advise and not necessarily teach code, this will be brief! Many readers seeing the…

  • 5 things to know starting out in tech!

    5 things to know starting out in tech!

    Yeah! Everyone is aware of the vast opportunities available in tech and how there is the coding and the non-coding…

    2 条评论

社区洞察

其他会员也浏览了