useInputs with array

For multiple inputs, You can use as arguments :

An array of string
An array of a mix of string and object
An array of object

When you use an array of string, the input is VALID by default, because there is no validation attached to it.
Please use it if :

You want some inputs with no validation

Import

Import useInputs from aio-inputs package

import{useInputs}from"aio-inputs"

Copied

Array of string

Call useInputs with an array of string. For example, you want the name, phoneNumber, and gender of a user

const[myInputs]=useInputs(["name","phoneNumber","gender"])

Copied

myInputs contains these related ready-to-use properties.

Now bind some input element.

returnmyInputs.map(ip =><inputkey={ip.key}{ ...ip.props }/>)

Copied

That is it. The value entered by the user will be stored in correspondingip.valuelocated in myInputs.

Validity

To know if your form (all your inputs) is valid, use isValid property. Every input has also his own valid property

// all inputs
yourInputs.isTouched
yourInputs.isValid
// Each input
eachInput.touched
eachInput.valid

Copied

You can RESET or also get all VALUES by using the FORM OBJECT.

Now if you want to change the type of the input, the label or other properties and add some validations, you should use object. You can still use string and create a combination of none validated inputs and validated ones.

Array of string and object

Let's create three inputs. Age with validation (minimum 18) and type number, Name and Firstname with no validation.
We will use object for age input and string for others.

const[myInputs]=useInputs([

{

name:"age",
type:"number",
validation:{min:min(18, "We need you to have at least 18")  // min validation
},

"name", // No validation

"firstname", // No validation

])

Copied

Now bind myInputs, to some input element. We will also display the error message if an input is touched and is not valid.

// Inside your component
returnmyInputs.map(ip => {
return<divkey={ip.key}>
<input{ ...ip.props }/>
{/* if touched and not valid */}
<span>{ip.errorMessage}</span>
</div>
})

Copied

That is it. The value entered by the user will be stored in correspondingip.valuelocated in myInputs.

Validity

To know if your form (all your inputs) is valid, use isValid property. Every input has also his own valid property

// all inputs
yourInputs.isTouched
yourInputs.isValid
// Each input
eachInput.touched
eachInput.valid

Copied

You can RESET or also get all VALUES by using the FORM OBJECT.

INPUTS PROPERTIES like name, type and many others are available.
Same for VALIDATION PROPERTIES like min, max and many others.

Hit next to find out how to use object with aio-inputs

Prev Next