reactjstypescriptradix

onChange in a Radix 3.x TextField.Root component


how can I get an onChange prop work within a Textfield.Root Radix component?(I must specify that I use Radix 3.2 - they ditched the old Textfield.Input when entering 3.x)

function MyComponent (...)
  const [email, setEmail] = useState("");
  const onChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  return (
    <form
...
    >
      <Flex direction="column" gap="3">
        <TextField.Root>
            type="email"
            placeholder="Entrer votre adresse email"
            value={email}
            onChange={onChangeEmail}
            required
        </TextField.Root>

This code gives me the error:Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ReactNode'.ts(2322) and I really cannot see why.


Solution

  • The issue is that you aren't passing the props correctly. Here's the fixed version.

    <TextField.Root
       type="email"
       placeholder="Entrer votre adresse email"
       value={email}
       onChange={onChangeEmail}
       required
     />