search

react-hook-form / documentation

📋 Official documentation
http://react-hook-form.com
MIT License
725 stars 1.04k forks source link

/advanced-usage#FieldArrays links to an implementation with a but in it #155

Closed lawrence-hoo closed 4 years ago

lawrence-hoo commented 4 years ago

This is incredibly minor, but I noticed in /advanced-usage#FieldArrays, the link in Note: if your application requires functionality such as: Delete, Insert, Append, Preprend. Here is the link for such implementation. with Controller. sends you to a codesandbox that appears to have a bug in it.

The codesandbox implements an update function that seems to be incorrect (throws an error stating Cannot set property 'id' of undefined).

The implementation currently is:

  const update = index => {
    const data = getValues();
    data[index].id = data[`field${index}`];
    setData([...data]);
  };

which (unless I've misunderstood what the function is trying to do), should be something like:

  const update = index => {
    const values = getValues();
    const oldId = data[index].id
    const newId = values[`field${oldId}`]
    setData([...data.slice(0, index), { id: newId }, ...data.slice(index + 1)])
  };
bluebill1049 commented 4 years ago

sorry for the late reply, would you like to send a PR to fix this?

lawrence-hoo commented 4 years ago

I'm wondering if it might be easier for the code sandbox author to edit his sandbox with my solution above.

Otherwise, I think I'd have to create a new sandbox and then update every language file's link (src/data/<en/jp/zh/kr/ru/es/pt>/advanced.tsx) (which I don't mind doing, if that's what it came to)

bluebill1049 commented 4 years ago

oh sorry my bad its' in the codesandbox! i will adjust 🙏