I created a web app on React and then converted it to a Preact app. However, I get Property 'value' does not exist on type 'EventTarget'.ts(2339) and Property 'checked' does not exist on type 'EventTarget'.ts(2339) errors in this .jsx file.
I did not face this problem on my React app.
I searched forums and it looks like the issue is with TypeScript. However, I am not using TypeScript here explicitly, so I wasn't able to find a working solution for my case.
CreateQuestion.jsx:
const CreateQuestion = ({ questionPoolId, onQuestionCreated }) => {
const [text, setText] = useState("");
const [defaultScore, setDefaultScore] = useState("");
const [answers, setAnswers] = useState([{ text: "", is_correct: false }]);
const [error, setError] = useState(null);
const { t } = useTranslation();
// handle async functions
return (
<form onSubmit={handleCreate} class="mt-4 p-4 border border-gray-300 rounded-lg shadow-md">
{error && <p class="text-red-500">{error}</p>}
<label class="block text-gray-700 font-semibold">{t("question_text")}</label>
<input
type="text"
class="w-full border p-2 rounded mt-1"
value={text}
onInput={(e) => setText(e.target.value)}
required
/>
<label class="block text-gray-700 font-semibold mt-3">{t("default_score")}</label>
<input
type="number"
class="w-full border p-2 rounded mt-1"
value={defaultScore}
onInput={(e) => setDefaultScore(e.target.value)}
required
/>
<p class="text-gray-700 font-semibold mt-3">{t("answers")}:</p>
{answers.map((answer, index) => (
<div key={index} class="flex items-center mt-2 space-x-2">
<input
type="text"
class="w-full border p-2 rounded"
value={answer.text}
onInput={(e) => handleAnswerChange(index, "text", e.target.value)}
placeholder={`${t("answer")} ${index + 1}`}
required
/>
<label class="flex items-center space-x-1">
<input
type="checkbox"
checked={answer.is_correct}
onChange={(e) => handleAnswerChange(index, "is_correct", e.target.checked)}
/>
<span>{t("correct")}</span>
</label>
<button type="button" onClick={() => handleRemoveAnswer(index)} class="bg-red-500 text-white p-1 rounded">
✖
</button>
</div>
))}
<div class="mt-4 space-x-2">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
{t("create_question")}
</button>
<button type="button" onClick={handleAddAnswer} class="bg-gray-500 text-white px-4 py-2 rounded">
+ {t("add_answer")}
</button>
</div>
</form>
);
};
export default CreateQuestion;
I created a web app on React and then converted it to a Preact app. However, I get Property 'value' does not exist on type 'EventTarget'.ts(2339) and Property 'checked' does not exist on type 'EventTarget'.ts(2339) errors in this .jsx file.
I did not face this problem on my React app.
I searched forums and it looks like the issue is with TypeScript. However, I am not using TypeScript here explicitly, so I wasn't able to find a working solution for my case.
CreateQuestion.jsx:
const CreateQuestion = ({ questionPoolId, onQuestionCreated }) => {
const [text, setText] = useState("");
const [defaultScore, setDefaultScore] = useState("");
const [answers, setAnswers] = useState([{ text: "", is_correct: false }]);
const [error, setError] = useState(null);
const { t } = useTranslation();
// handle async functions
return (
<form onSubmit={handleCreate} class="mt-4 p-4 border border-gray-300 rounded-lg shadow-md">
{error && <p class="text-red-500">{error}</p>}
<label class="block text-gray-700 font-semibold">{t("question_text")}</label>
<input
type="text"
class="w-full border p-2 rounded mt-1"
value={text}
onInput={(e) => setText(e.target.value)}
required
/>
<label class="block text-gray-700 font-semibold mt-3">{t("default_score")}</label>
<input
type="number"
class="w-full border p-2 rounded mt-1"
value={defaultScore}
onInput={(e) => setDefaultScore(e.target.value)}
required
/>
<p class="text-gray-700 font-semibold mt-3">{t("answers")}:</p>
{answers.map((answer, index) => (
<div key={index} class="flex items-center mt-2 space-x-2">
<input
type="text"
class="w-full border p-2 rounded"
value={answer.text}
onInput={(e) => handleAnswerChange(index, "text", e.target.value)}
placeholder={`${t("answer")} ${index + 1}`}
required
/>
<label class="flex items-center space-x-1">
<input
type="checkbox"
checked={answer.is_correct}
onChange={(e) => handleAnswerChange(index, "is_correct", e.target.checked)}
/>
<span>{t("correct")}</span>
</label>
<button type="button" onClick={() => handleRemoveAnswer(index)} class="bg-red-500 text-white p-1 rounded">
✖
</button>
</div>
))}
<div class="mt-4 space-x-2">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
{t("create_question")}
</button>
<button type="button" onClick={handleAddAnswer} class="bg-gray-500 text-white px-4 py-2 rounded">
+ {t("add_answer")}
</button>
</div>
</form>
);
};
export default CreateQuestion;
1 Answer
Reset to default 0TLDR: You want event.currentTarget. .currentTarget is the element the event listener is attached to (your <input> elements) whilst .target can be any number of child sources.
The reason for this issue is that React diverges from the DOM in that it creates a synthetic event system. These events are not the native browser events and are delegated to the component root by default. This allows you to use .target in React when you wouldn't want that when working with vanilla JS (or Preact, Vue, Svelte, etc., as all of them match browser behavior).
.target should really be avoided, preferring to use .currentTarget, but if you did need it, you'd have to cast as the event target could be any number of elements besides the one the event listener is attached to. As you're not using TS, you'd need to do a JSDoc cast like so:
<input
type="number"
class="w-full border p-2 rounded mt-1"
value={defaultScore}
onInput={(e) => setText(/** @type {HTMLInputElement} */ (e.target).value)}
required
/>