Manage the status of inputs

How to deal with inputs?

We're going to see how can we manage the states of the input tags that users can interacts with.

Let's say there is a file like this.

import React from 'react';

function InputSample() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default InputSample;

And render this in App.js. There is no change because there is no way to change the value in the tag.

So, we have to use the 'useState' to detect the changes in the input tag.

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText('');
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>value: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

In this code, we must set the value in the input tag. In the 'onChange' event, we get the input DOM as an event object 'e'. So if there's any input, onChange is called. It sets the value now is in the input, and set it as 'text' to be on the screen.

Now the content of the input tag is updated.

Manage multiple inputs

import React, { useState } from 'react';

function InputSample() {
  const onChange = (e) => {
  };

  const onReset = () => {
  };


  return (
    <div>
      <input placeholder="이름" />
      <input placeholder="닉네임" />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        이름 (닉네임)
      </div>
    </div>
  );
}

export default InputSample;

Now there are two input tags. It is not the best way to make mutiple useStates and onChanges. The better way is to refer the value, which is changed when the 'name' is changed.

import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  const { name, nickname } = inputs;

  const onChange = (e) => {
    const { value, name } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
  };

  return (
    <div>
      <input name="name" placeholder="name" onChange={onChange} value={name} />
      <input
        name="nickname"
        placeholder="nickname"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값:</b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

There is an object named input. there are two properties, name and nickname. When I put something in the textfield, the object's property changes. In React, it is not able to modify the object itself.

inputs[name] = value;

This is not a proper way to do this.

setInputs({
  ...inputs,
  [name]: value
});

In this way, object 'inputs' is copied by 'spreading' it. And its value which has 'name' key is replaced by 'value'.