Property ‘Value’ Does Not Exist On Type EventTarget – How To Solve It?

Property ‘value’ does not exist on type EventTarget

If you are confused with the error “Property ‘value’ does not exist on type EventTarget”, don’t worry. Let’s read this article. It will show you the cause of error and how to fix it.

What is ‘event.target’?

The event.target is the element where the ‘event’ occurred or the element where the ‘event’ was fired.

Code:

const button = document.getElementById('clickme__button');
button.onclick = (event) => {
    console.log(event.target.id);
}

This example shows that event.target is the element on which the ‘event’ was fired. So when we use console.log(event.target.id), we can get the id of that element.

HTMLButtonElement

HTMLButtonElement will provide attributes and methods for the user to manipulate the <button> tag. It differs from HTMLElement in that it inherits existing values.

What causes the error “Property ‘value’ does not exist on type EventTarget”?

The error “Property ‘value’ does not exist on type EventTarget” usually happens when working with DOM in Typescript. Look at the below example to know why it happens.

Code:

function App() {
    const handleOnclick = (event: Event) => {
    	console.log(event.target.value);
    };

    return (
        <div>
          	<button onClick={handleOnclick} id="message">Click me!</button>
        </div>
    );
}
 
export default App;

Output:

 Property 'value' does not exist on type 'EventTarget'.

The leading cause of this error is that we chose the incorrect event type. 

In the above example, because we have set the ‘event’ of the function as ‘Event’ is wrong, we cannot get the value of an element.

Some ways to fix this error

Cast event.target as HTMLButtonElement 

You can cast the type of event.target to HTMLButtonElement when creating the eventTarget variable. The example below will show you how to do it.

Code:

function App() {
    function handleOnClick(event: Event) {
        const eventTarget = event.target as HTMLButtonElement;
        if (eventTarget) console.log(eventTarget.value);
    }
  
    return (
        <div>
          	<button onClick={handleOnClick} id="message">Click me!</button>
        </div>
    );
}
 
export default App;

The main cause of this error is when you try to access value or any property, the program can’t get it because the ‘event’ is not properly formatted, and we cannot get its properties. So we define event.target as HTMLButtonElement to fix this error.

Define the type of the target using the ‘&’ operator

Like the above example, we still keep the event: Event, but we will use the ‘&‘ operator. You can see the example below to understand more details.

Code:

function App() {
    function handleOnClick(
  		event: Event & {
    		eventTarget: HTMLButtonElement
    	}
    ) {
        const {eventTarget} = event
        if (eventTarget) console.log(eventTarget.value);
    }

    return (
        <div>
        	<button onClick={handleOnClick} id="message">Click me!</button>
        </div>
    );
}

export default App;

In this approach, we use the ‘&‘ operator to add the definition for eventTarget as an HTMLButtonElement. Then we assign its value to the ‘event’ value. So now we can get the internal properties without error.

Summary

In this article, you can find two ways to fix the error “Property ‘value’ does not exist on type EventTarget” in Reactjs. Let’s try them to get your desired results. Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *