Question:

I'm new to javascript and typescript and ran into a problem with trying to refactor a simple tic-tac-toe program from vanilla css to MUI components.

The method that handles input for the <input type='text'> tag expects a HTMLInputElement but recieves a HTMLDivElement because MUI's TextField is a div contaning an input.

Heres the question how would I refactor this function to get the input tags value from the TextField MUI component?

Ideas:

I was thinking that I should expect a the HTMLDivElement then find it's child input tag, but how would I do this?

Current Implementation

<input
    type='text'
    value={players[0]}
    onInput={(e) => handleInput(e, 0)}
/>

Using MUI TextField Implementation

<TextField type='text' value={players[0]} onInput={(e) => handleInput(e, 0)} />

Method that handles the onInput event.

const handleInput = (event: FormEvent<HTMLInputElement>, index: number) => {
    console.log("handleInput");
    const newPlayers = [...players]; //
    newPlayers.splice(index, 1, event.currentTarget.value); 
    setPlayers(newPlayers); // Set the state for the players
};

Here is what MUI's TextField component produces.

<div class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root">
    <div class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root">
        <input aria-invalid="false" type="text" class="MuiOutlinedInput-input MuiInputBase-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input" value="" id="mui-2">
        <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline">
            <legend class="css-nnbavb">
                <span class="notranslate">​</span>
            </legend>
        </fieldset>
    </div>
</div>