Why does input in React/Redux form change a number into a string?

Question

I'm building a form in React and Redux. The input for wins and losses changes the number input into a string when I type it into the form. The form isn't saving because the data type is supposed to be a number. I don't want the number to change into a string when I input it into the form.

I think the issue might be with my handleOnChange for the form.

class TeamForm extends Component {
   handleOnChange = event => {
      const { name, value } = event.target;

      const currentTeamFormData = Object.assign({}, 
      this.props.teamFormData, {
        [name]: value
        });
      this.props.updateTeamFormData(currentTeamFormData);
  };

   handleOnSubmit = event => {
       event.preventDefault();
       this.props.createTeam(this.props.teamFormData);
   };

    render() {
        const { name, wins, losses, logo_url } = this.props.teamFormData;
        return (
          <div className="teamForm">
            <h1>Add a team to the League</h1>
            <form onSubmit={this.handleOnSubmit}>
              <div>
                <label htmlFor="name">Name:</label>
                <input
                  type="text"
                  onChange={this.handleOnChange}
                  name="name"
                  value={name}
                />
              </div>
              <div>
                <label htmlFor="wins">Wins:</label>
                <input
                  type="number"
                  onChange={this.handleOnChange}
                  name="wins"
                  value={wins}
                />
              </div>
              <div>
                <label htmlFor="losses">Losses:</label>
                <input
                  type="number"
                  onChange={this.handleOnChange}
                  name="losses"
                  value={losses}
                />
              </div>
              <div>
                <label htmlFor="logo_url">Logo url:</label>
                <input
                  type="text"
                  onChange={this.handleOnChange}
                  name="logo_url"
                  value={logo_url}
                />
              </div>

              <button type="submit">Add Team</button>
            </form>
          </div>
      );
    }
}

Below is the action creator and reducer associated with updating the form.

    export const updateTeamFormData = teamFormData => {
      debugger;
      return {
        type: "UPDATED_DATA",
        teamFormData
      };
    };

    export const resetTeamForm = () => {
      return {
        type: "RESET_TEAM_FORM"
      };
    };


    const initialState = {
       name: "",
       wins: 0,
       losses: 0,
       logo_url: ""
    };

   export default (state = initialState, action) => {
      switch (action.type) {
        case "UPDATED_DATA":
          return action.teamFormData;

        case "RESET_TEAM_FORM":
          return initialState;

        default:
          return state;
      }
   };

Any help or insight is appreciated. Thanks!

Mrchief · Accepted Answer · 2018-11-05 23:12:11Z

8

Updates: Since it's a regular form, you can just handle this in your handleOnChange event listener:

handleOnChange = event => {
    const { name, value, type } = event.target;

    const currentTeamFormData = Object.assign({}, this.props.teamFormData, {
      [name]: type === "number" ? parseInt(value, 10) : value
    });

    this.props.updateTeamFormData(currentTeamFormData);    
};

Here I check the input.type so that handleOnChange can stay abstract/generic enough but you can use any other technique to distinguish the number type inputs (or even create separate handlers even). The idea is to see if it is a numeric type and if so, use parseInt to convert it to number.

Here's an updated sandbox (note I used setState to demo the core concepts but that's not necessary to use; you can use your redux actions as you're doing right now).

Old answer; leaving here for posterity

Redux form offers a parse function for this purpose:

<input
    type="number"
    onChange={this.handleOnChange}
    name="wins"
    value={wins}
    parse={value => parseInt(value, 10)}
/>

Note that type="number" has no effect on how the form stores the data. It is only helpful with modern browsers which can display a numeric keyboard that in turn makes your form more user friendly.

edited Nov 5, 2018 at 23:12

answered Nov 3, 2018 at 18:24

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Samson Yuwono Over a year ago

The parse line isn't parsing the number that passes into value. Any other suggestions for this?

Mrchief Over a year ago

It does: imgur.com/a/oTge5xB. See how the stored value changes to number after adding parseInt. Here's the sandbox: codesandbox.io/s/x31n2v7r0w

Samson Yuwono Over a year ago

I'm not using redux-form. Where do I apply parseInt to my current form input.

Mrchief Over a year ago

Well, you tagged it as redux-form! :) See my updates.

Bruno Paulino · Accepted Answer · 2020-03-29 13:26:26Z

7

Input values are always sent to you as Strings, no matter the input type. When you use input type="number" it only helps the browser to present a number keypad.

You either have to cast the value to Int parseInt(myValue) before calling your action or inside the action itself.

edited Mar 29, 2020 at 13:26

answered Nov 3, 2018 at 17:31

Bruno Paulino

5,8702 gold badges45 silver badges42 bronze badges

Collectives™ on Stack Overflow

Why does input in React/Redux form change a number into a string?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related