Accessing and updating data attributes

[atshakil]

Using just React, we can utilize data-* attributes to store data.

const DataAttr = () => {
  const userNameRef = useRef(null);

  return (
    <div>
      <input name="username" type="text" data-userid="111" ref={userNameRef} />
      <button onClick={e => {if(userNameRef.current) userNameRef.current.dataset.userid = "555"}}>Set</button>
      <button onClick={e => {alert(userNameRef.current && userNameRef.current.dataset.userid)}}>Get</button>
    </div>
  );
}

How can this be achieved using react-hook-form?

[jorisre]

Hi @atshakil

I'm not sure to understand what you want to do. Do You want to put data-* in React Hook Form ?
If data-* is like defaultValues then you can use directly defaultValues: useForm({ defaultValues: { ... } })

[atshakil]

Hi @jorisre
Sorry for confusion. Here's an example of the issue that I am trying to resolve.

const PlainInput = () => {
  const userNameRef = useRef(null);

  return (
    <div>
      <input name="username" type="text" data-userid="111" defaultValue="usernamexyz" ref={userNameRef} />
      <button onClick={e => alert(userNameRef.current.value)}>GetVal</button>
      <button onClick={e => {alert(userNameRef.current.dataset.userid)}}>Get(data-userid)</button>
      <button onClick={e => {userNameRef.current.dataset.userid = "555"}}>Set(data-userid)</button>
    </div>
  );
}

const HookedInput = () => {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      fullName: 'Tom'
    }
  });

  return (
    <div>
      <input type="text" name="fullName" data-userid="111" ref={register}></input>
      <button onClick={handleSubmit(fields => alert(fields.fullName))}>GetVal</button>
      {/* How can we access `data-userid` */}
      <button onClick={e => alert('?')}>Get(data-userid)</button>
      {/* How can we update the value of `data-userid` */}
      <button onClick={e => alert('?')}>Set(data-userid)</button>
    </div>
  );
};

With plain React, we can store data attributes with input elements (e.g. <input name="fullName" defaultValue="Xyz" data-userid="1" /> is storing userid data attribute along with fullName value). Can we do the same or something similar with react-hook-form?

My concern is, if an input field can contain related data along with the value ('userid' in this case), then I can avoid using useState or other state management solution.

[jorisre]

@atshakil I'm sorry, I still doesn't understand what you want to do.

Do you want to catch data-* values with React Hook Form ?

[atshakil]

Yes, I want to catch and also update.

[bluebill1049]

sorry @atshakil we don't have such feature.

[atshakil]

Got it. Thanks for clarification. :)