React: Argument type function(any): any & {enteredTitle: any} is not assignable to parameter type

Question

I am following a React course and I have the following code:

const [userInput, setUserInput] = useState({
    enteredTitle: "",
    enteredAmount: "",
    enteredDate: ""
})

function titleChangeHandler(event) {
    setUserInput((prevState) => {
        return {
            ...prevState,
            enteredTitle: event.target.value
        }
    })
}

I am getting the following error in my IDE:

Argument type function(any): any & {enteredTitle: any} is not assignable to parameter type ((prevState: {enteredAmount: string, enteredTitle: string, enteredDate: string}) => {enteredAmount: string, enteredTitle: string, enteredDate: string}) | {enteredAmount: string, enteredTitle: string, enteredDate: string}   Type string is not assignable to type undefined     Type function(any): any & {enteredTitle: any} is not assignable to type (prevState: {enteredAmount: string, enteredTitle: string, enteredDate: string}) => {enteredAmount: string, enteredTitle: string, enteredDate: string} 

When I default back to my old implementation, it works fine:

function titleChangeHandler(event) {
    setUserInput({
        ...userInput,
        enteredTitle: event.target.value,
    })
}

JSX implementation:

return (
    <form>
        <div className="new-expense__controls">
            <div className="new-expense__control">
                <label>Title</label>
                <input type="text" onChange={titleChangeHandler} />
            </div>
            <div className="new-expense__control">
                <label>Amount</label>
                <input type="number" min="0.01" step="0.01" onChange={amountChangeHandler} />
            </div>
            <div className="new-expense__control">
                <label>Date</label>
                <input type="date" min="2019-01-01" max="2024-12-31" onChange={dateChangeHandler} />
            </div>
        </div>
        <div className="new-expense__actions">
            <button type="submit">Add Expense</button>
        </div>
    </form>
)

What am I doing wrong?

I am using IntelliJ IDEA and JavaScript (not TypeScript).

Answer 1

This bug is tracked at WEB-55655, please vote for it to get notified when it's fixed