How to correctly type onChange event based on event.name?-CodePudding

I am trying to create a generic onChange event function which can dynamically set the state based on the passed event.name property. Currently whenever I type something in the amount field it is taking it as a string. Is there a way to do this?

Sample code

const [formState, setFormState] = useState<{title: string, amount: number, date: Date}>({
        title: '',
        amount: 0.01,
        date: new Date(Date.now()),
    });

// should be able to handle the types I have declared
const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
 
        setFormState((prevState) => {
            return {
                ...prevState,
                [name]: value,
            }
        });
}

return (
        <form onSubmit={submitHandler}>
            <div className="new-expense__controls">
                <div className="new-expense__control">
                    <label>Title</label>
                    <input type="text" name="title" onChange={inputChangeHandler} value={formState.title}></input>
                </div>
                <div className="new-expense__control">
                    <label>Amount</label>
                    <input type="number" min="0.01" step="0.01" name="amount" onChange={inputChangeHandler} value={formState.amount}></input>
                </div>
                <div className="new-expense__control">
                    <label>Date</label>
                    <input type="date" min="2019-01-01" step="2022-12-31" name="date" onChange={inputChangeHandler} value={formState.date.toISOString().split('T')[0]}></input>
                </div>
            </div>
            <div className="new-expense__actions">
                <button type="submit">Add Expense</button>
            </div>
        </form>
    );

CodePudding user response：

parseFloat Will give you number float from string so for example:

parseFloat("2.15") it will return 2.15

In your code:

 const inputChangeHandler = (e) => {
    let { name, value } = e.target;
    if (name == 'amount') {
      value = JSON.parse(value);
    }
    setFormState((prevState) => {
      return {
        ...prevState,
        [name]: value,
      }
    });
  }

Source:

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

CodePudding user response：

Using JSON.parse() you can do that ! show below code it's help you !

const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        let { name, value } = e.target;
        if (name == 'amount') {
          value = JSON.parse(value);
        }
 
        setFormState((prevState) => {
            return {
                ...prevState,
                [name]: value,
            }
        });
}