CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-forms
Toohina Barua
Toohina Barua

Reputation: 35

React form not displaying the correct inputs on the screen after I click submit button

This is a React form. I have been trying to display Hello {firstName} {lastName} after the user gives the inputs and clicks the submit button . However, it is not recording the inputs properly and not displaying it correctly after the submit button is clicked. Please help!!!

import React, { useState } from 'react';

function App() {
  const [newName, setNewName] = useState({
    fName: '',
    lName: ''
  });
  const [fullName, setFullName] = useState(newName);

  function handleOnSubmit(event) {
    console.log(newName);
    setFullName(newName);
    event.preventDefault();
  }

  function handleOnChange(event) {
    console.log(newName);
    var { value, name } = event.target;
    setNewName((prevValue) => {
      if (name === 'fName')
        return {
          fName: value,
          lName: prevValue.lName
        };
      else
        return {
          fName: prevValue.fName,
          lName: value
        };
    });
  }

  return (
    <div className='container'>
      <h1>
        Hello {fullName.fName} {fullName.lName}
      </h1>
      <form onSubmit={handleOnSubmit}>
        <input
          name='fName'
          placeholder='First Name'
          onChange={handleOnChange}
          value={fullName.fName}
        />
        <input
          name='lName'
          placeholder='Last Name'
          onChange={handleOnChange}
          value={fullName.lName}
        />
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
}

export default App;

Upvotes: 1

Views: 1037

Answers (2)

Darsh Shah
Darsh Shah

Reputation: 381

Try using this: We are going to create an Input custom hook.

useInput.js file

//input custom hook

import { useState } from "react";
function useInput(initialValue = "") {
  const [value, setValue] = useState(initialValue);
  const reset = () => {
    setValue(initialValue);
  };
  const bind = {
    value,
    onChange: (e) => setValue(e.target.value),
  };
  return [value, bind, reset];
}
export default useInput;

This is how you can use this Input custom hook:

import React from "react";
import useInput from "../hooks/useInput";
function Test() {
  const [firstName, bindFirstName, resetFirstName] = useInput("");
  const [lastName, bindLastName, resetLastName] = useInput("");
  const handleSubmit = (e) => {
     e.preventDefault();
     alert(`hello ${firstName} ${lastName}`); // you can change this as per your requirement
     resetFirstName();
     resetLastName();
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" {...bindFirstName} />
        <input type="text" {...bindLastName} />
        <button value="submit" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}
export default Test;

Upvotes: 1

Harmandeep Singh Kalsi
Harmandeep Singh Kalsi

Reputation: 3345

The problem was event handling on the input boxes. In value you binded fullName.fName and fullName.lName , but onChange you are updating the state of newName and the state of the fullName is only getting changed when you click submit . Please update the form code as below. It should work for you !

<form onSubmit={handleOnSubmit}>
        <input
          name="fName"
          placeholder="First Name"
          onChange={handleOnChange}
          value={newName.fName}
        />
        <input
          name="lName"
          placeholder="Last Name"
          onChange={handleOnChange}
          value={newName.lName}
        />
        <button type="submit">Submit</button>
      </form>

Upvotes: 2

Related Questions