por Do you know what checkbox inputs are in React? Do you know what a checkbox is? Forms in React are a type of element that allows us to create spaces where the user inserts their data. This data will then be sent and processed on our server to fulfill various functions. In this post, we will teach you what it is and how it works input of type check box in React, one of the data types to insert into a form.
A little context
In our post about forms as controlled components in React, we mentioned that the forms in this JavaScript library are controlled from our state. This means that the value we see on the screen of our input it is simply a reflection of the state of the component. In React, there are several types of values in a form and the most common is input of type text.
In our post about running a submit In React, we have accompanied you in the process of sending a data created with a input of type text. This type of input allows us to create a space where the user can write text. This text will be the value of our inputwhich we manipulate and access with the property value. To learn more about this, you can read our post on controlling input in React.
What is checkbox input in React?
He input of type check box in React it is one of the options we have to insert data into a form. As its name indicates, this option is based on creating a box that can be punctured or deflated. So, while the box is the input checkbox, The state of this box will be our data or value. To control a input of type check box, we must insert the property checked rather value.
To insert a input of type check box in React, We do the same procedure as with a input of type text. As its name suggests, the difference will be concentrated in the property type. Below, we present the line of code that allows us to create this input check box:
type= «checkbox» />
With the previous line of code we have created a input check box in React. However, this input It will be an uncontrolled component. In order to control this data, we must use the property checked with the values true either false. That is, if we pass the value true:
type= «check box» checked: true/>
And if we pass the value false:
type= «check box» checked: false/>
Just as with property values, the property checked in a input of type check box in React it defines a static value. That is, the user will not be able to change this value when we define it this way. So, in order to change the value of this box, we will have to use a state in React, i.e. a fact that changes over time. The state we create for ourselves input checkbox can have the same logic as the ones we have presented to you in our post about joining states in React.
After creating a state to save the value of the input of type check box in React, we will use the event onChange in React to capture the event and modify the state.
Therefore, the logic of a input «checkbox» is the same as a input «text», the only real difference is that we use the property checked instead of value. That is, we will use the command event.target.checked instead of event.target.value.
Do you want to continue learning?
Now that you know what it is and how it works input of type check box in React, You’re closer to learning how to master this powerful JavaScript library! To continue learning to develop, not only with React but also with languages such as HTML, CSS and JavaScript, we invite you to be part of our Full Stack Web Development Bootcamp. With this intensive and comprehensive training program, You will become an expert in web development in just a few months! What are you waiting for to start? Sign up now and learn more about checkbox in react!