How to submit input to node js service from react JS UI

Question

I have general question regarding react js. I am very new in react. General approach in react is create a state object for input controls and assign its state value to that input before submitting. This will work fine when we have 2-5 controls on page.

I have 20 diff types of input present on page like textboxes, dropdowns, calender and radio button. Do I need to create 20 properties in state object? Do I need to write 20 diff types of onChange function for controls? This will my code too much lenghty.

Answer 1

Controlled Inputs

You're dealing with controlled inputs . You can achieve the same with uncontrolled inputs if you don't need to keep the state (at the bottom you will find a link that will help you with this).

To handle the inputs you need, one could do something like this:

IMPORTANT: Notice that the state property match the input name.

class App extends React.Component {
  state = {
    text: "",
    checkbox: false,
    dropdown: "",
    date: "",
    radio: ""
  };

  handleTextChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleCheckboxChange = event => {
    const { name } = event.target;
    this.setState(previousState => ({ [name]: !previousState[name] }));
  };

  handleDropdownChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleDateChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  handleRadioChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <div className="App">
        <p>Text</p>
        <input
          type="text"
          name="text"
          onChange={this.handleTextChange}
          value={this.state.text}
        />

        <p>Checkbox</p>
        <input
          type="checkbox"
          name="checkbox"
          onChange={this.handleCheckboxChange}
          value={this.state.checkbox}
        />

        <p>Dropdown</p>
        <select
          name="dropdown"
          value={this.state.dropdown}
          onChange={this.handleDropdownChange}
        >
          <option name="option1">Option 1</option>
          <option name="option2">Option 2</option>
        </select>

        <p>Date</p>
        <input
          type="date"
          name="date"
          onChange={this.handleDateChange}
          value={this.state.date}
        />

        <p>Radio</p>
        <input
          type="radio"
          name="radio"
          onChange={this.handleRadioChange}
          value="option1"
        />
        <label for="option1">Option 1</label>
        <br />

        <input
          type="radio"
          name="radio"
          onChange={this.handleRadioChange}
          value="option2"
        />
        <label for="option2">Option 2</label>
      </div>
    );
  }
}

Then you could simply add more inputs of one of these types carefully matching the input name to the class state `property.

You can find a working example in this codesandbox: https://codesandbox.io/s/controlled-inputs-jttq8

For a more detailed answer and how to deal with uncontrolled forms, refer to this awesome article on medium: https://medium.com/@agoiabeladeyemi/the-complete-guide-to-forms-in-react-d2ba93f32825

Source: https://reactjs.org/docs/forms.html#controlled-components