Form in React

We have a form in HTML, using of form we input data from user and pass it in backend

Form data and state with single input data

We create from using a controlled component, here we can get user input data and pass it in the backend.

First we can start with only one input field.

<input type="text" placeholder="username" />

Here we see this is an uncontrolled form because here we cannot access user data. So we get user imputed data we work with onChange function.

const username = (event) => {
    console.log(event.target.value)
}
return ( <>
    <input type="text" placeholder="username" onChange={username} />
</> )

Here we access the user imputed value in the console but now we store it into state.

const [usernameState, setusernameState] = useState("")
const username = (event) => {
    setusernameState(event.target.value)
}
return ( <>
    <h2>@{usernameState}</h2>
    <input type="text" placeholder="username" onChange={username} />
</> )

Here we can access and store user imputed value in state but we cannot control non-imputed value or validation.

const username = (event) => {
    let val = event.target.value
    if(val === 'username' || val === "admin") {
        setusernameState("")
        alert(`You cannot enter username as ${val}.`)
    } else { setusernameState(val) }
}

But here we see, our state is now empty but the input field has a value so we can pass the state value to the input field.

<input type="text" placeholder="username" value={usernameState} onChange={username} />

Form data and state with multiple input data

We see above single data and state but in form we have never single data, so how can we handle multiple data in form.

Creating multiple states

const [usernameState, setusernameState] = useState("")
const [nameState, setnameState] = useState("")
const [passwordState, setpasswordState] = useState("")

const username = (event) => {
    setusernameState(event.target.value)
}
const name = (event) => {
    setnameState(event.target.value)
}
const password = (event) => {
    setpasswordState(event.target.value)
}
return ( <>
    <h1>Hii {nameState}</h1>
    <form>
        <h2>@{usernameState}</h2>
        <input type="text" placeholder="username" 
            value={usernameState} onChange={username} />
        <input type="text" placeholder="name" value={nameState} onChange={name} />
        <input type="password" placeholder="password" 
            value={passwordState} onChange={password} />
    </form>
</> )

Here we see we create multiple states but we also use substates. And store data in only one state.

const [state, setState] = useState({
    usernameState: "", nameState: "", passwordState: ""
})
const {usernameState, nameState, passwordState} = state
const username = (event) => {
    setState(prevState => { return {...prevState, usernameState: event.target.value} })
}
const name = (event) => {
    setState( prevState => { return {...prevState, nameState: event.target.value} })
}
const password = (event) => {
    setState( prevState => { return {...prevState, passwordState: event.target.value} })
}

Submit data of form for show data

We above see how we can change the data onChange but sometimes when data submit then show on fields. So we can now see how we can handle the submit function and button onsubmit event within the form.

We have created a new state and store presenting data on that state.

const [data, setData] = useState({
    usernameData: "",
    nameData: "",
})
const { usernameData, nameData } = data

We can also change the data display variable name from state to data.

<h1>Hii {nameData}</h1>
<form>
    <h2>@{usernameData}</h2> // below code is same
</form>

Now we cannot use the onSubmit event on button but we use this event on form so when we click on submit button data will be submitted.

<form onSubmit={dataSubmit}>
    // Inner code is same
</form>

Then we defined this event function.

const dataSubmit = (event) => {
    setData(prevData => { return { 
        ...prevData, usernameData: usernameState, nameData: nameState
    } }) }

But here we are facing one problem when we submit data page load and data cannot show. So we prevent this default submit method.

const dataSubmit = (event) => { 
    event.preventDefault()
    // below code is same
}

Form data with multiple input data and name

We can see above, we work with multiple data and input but here we can see how we can easily use the name attribute to store data in value.

Above we see how to handle multiple input field data with different function calling.

const username = (event) => {
    setState(prevState => { return {...prevState, usernameState: event.target.value} })
}
const name = (event) => {
    setState( prevState => { return {...prevState, nameState: event.target.value} })
}
const password = (event) => {
    setState( prevState => { return {...prevState, passwordState: event.target.value} })
}

Here we can see how to handle multiple input field data in single function calling.

First we add a name attribute in our input fields. The name value is the same as the subState value. And using different functions we use a single function in all input fields onChange events.

<input type="text" placeholder="username"
    name="usernameState"
    value={usernameState}
    onChange={states} />
<input type="text" placeholder="name"
    name="nameState"
    value={nameState}
    onChange={states} />
<input type="password" placeholder="password"
    name="passwordState"
    value={passwordState}
    onChange={states} />

Now, we create functions that use name value and store data in state.

We access name and value attributes and compare names with states and store data into state.

const states = (event) => {
    let value = event.target.value
    let name = event.target.name

    setState(prevState => {
        if (name === "usernameState"){
            return { ...prevState, usernameState: value }
        } else if (name === "nameState"){
            return { ...prevState, nameState: value }
        } else if (name === "passwordState"){
            return { ...prevState, passwordState: value }
        }
    })
}

Here also we compare all data manually but we simply use name and store value.

const states = (event) => {
    let {name, value} = event.target
    setState(prevState => { return { ...prevState, [name]: value } })
}