CODEWITHSUNDEEP
javascriptreactjsnext.jsbulma
mahima
mahima

Reputation: 1975

React form input values in JS

I am using NextJS with bulma CSS to create a simple application. I have this following form:

const MyPage = () => {
const [firstName, setFirstName] = useState('')
const [secondName, setSecondName] = useState('')

const updateFirstName = event => {
    setFirstName(event.target.value)
}

const updateSecondName = event => {
    setSecondName(event.target.value)
}

const createUser = async() => {
   // Todo: perform some action with firstName and secondName
}

return (
<section className='mt-5'>
    <div className='container'>
        <div className='field'>
            <label className='label'>My Form</label>
            <div className='control'>
                <input onChange={updateFirstName} className='input' type='type' placeholder='Enter First Name'></input>
            </div>
        </div>
        <div className='field'>
            <div className='control'>
                <input onChange={updateSecondName} className='input' type='type' placeholder='Enter Second Name'></input>
            </div>
        </div>
        <button onClick={createUser} className='button is-primary'>Create</button>
    </div>
</section>
)
}
export default MyPage

I have to call updateFirstName and updateSecondName on every input change. I want to get these input field's value on createUser() function call only. Please suggest how to do it or any other better approach. I want to eliminate firstName and secondName variables, and directly access entered input in the createUser() function.

Upvotes: 0

Views: 306

Answers (4)

BIRKAN
BIRKAN

Reputation: 81

You can write a handler function

Firstly, you should add all variables to same state.

  const [userInfo, setUserInfo] = useState({
    firstName: "",
    secondName: ""
  });

and you should give a name to inputs like this.

  <input
  className="input"
  onChange={onChangeHandler}
  name="firstName" //name attribute must same your state variable
  placeholder="Enter First Name"
  />

  <input
  className="input"
  onChange={onChangeHandler}
  name="secondName" //name attribute must same your state variable
  placeholder="Enter Second Name"
  />

and your handler function should like this

  const onChangeHandler = (e) =>
    setUserInfo({ ...userInfo, [e.target.name]: e.target.value });

and this function take your input value and set your state who same name.

Full code

export default function App() {
  const [userInfo, setUserInfo] = useState({
    firstName: "",
    secondName: ""
  });

  const onChangeHandler = (e) =>
    setUserInfo({ ...userInfo, [e.target.name]: e.target.value });

  const sendData = () => {
    console.log(userInfo);
  };

  return (
    <div className="App">
      <section className="mt-5">
        <div className="container">
          <div className="field">
            <label className="label">My Form</label>
            <div className="control">
              <input
                className="input"
                onChange={onChangeHandler}
                name="firstName"
                placeholder="Enter First Name"
              />
            </div>
          </div>
          <div className="field">
            <div className="control">
              <input
                className="input"
                onChange={onChangeHandler}
                name="secondName"
                placeholder="Enter Second Name"
              />
            </div>
          </div>
          <button onClick={sendData} className="button is-primary">
            Create
          </button>
        </div>
      </section>
    </div>
  );
}

https://codesandbox.io/s/gallant-pasteur-uglbri?file=/src/App.js:58-1264

Upvotes: 0

Selvakumar Sekar
Selvakumar Sekar

Reputation: 1

You can try alternatively with this useRef() hook,

const MyPage = () => {

const firstName = useRef();
const secondaName = useRef();

const createUser = async() => {
    
   // Todo: perform some action with firstName and secondName
   console.log(firstName.current.value, secondName.current.value)  // It will prints the value that is typed by the user in both the textfields
  
}

return (
<section className='mt-5'>
    <div className='container'>
        <div className='field'>
            <label className='label'>My Form</label>
            <div className='control'>
                <input ref={firstName} className='input' type='type' placeholder='Enter First Name'></input>
            </div>
        </div>
        <div className='field'>
            <div className='control'>
                <input ref={secondName} className='input' type='type' placeholder='Enter Second Name'></input>
            </div>
        </div>
        <button onClick={createUser} className='button is-primary'>Create</button>
    </div>
</section>
)
}
export default MyPage

Upvotes: 0

Nikhil G
Nikhil G

Reputation: 2466

Please change your input fields as shown below:

 <input onChange={(e)=>createUser(e,'firstName')} className='input' type='type' placeholder='Enter First Name'></input>
 <input onChange={(e)=>createUser(e,'lastName')} className='input' type='type' placeholder='Enter First Name'></input>

Then in your update your createUser function as shown below:

const createUser = (event, element) => {
   if(element==='firstName') {
      setFirstName(event.target.value)
   }

   if(element==='lastName') {
      setLastName(event.target.value)
   }
}

Upvotes: 0

Singh3y
Singh3y

Reputation: 381

If you don't want a controlled input. You can quit managing the state and access the value old way using plain vanilla JS.

Make sure to add name attribute with all the input fields.

function createUser() {
    
   const inputs = document.querySelectorAll(".field input")
   let data = {}
   inputs.forEach(input => {
      data[input.name] = input.value
   })
   /**
    This would yield you
    {
      'firstname': 'value',
      'secondName': 'value' 
    }
   **/
}

Upvotes: 1

Related Questions