search

vaadin / docs

Official documentation for Vaadin and Hilla.
https://vaadin.com/docs
Other
27 stars 170 forks source link

Hilla syntax to bind arrays to forms in React is incorrect #3476

Open cromoteca opened 3 weeks ago

cromoteca commented 3 weeks ago

The syntax recommended to bind arrays in forms, introduced in https://github.com/vaadin/docs/pull/2733, looks incorrect: the map function doesn't exist.

In 24.4 you can use {Arrays.from(model.people, (person) => <... />)}. In 24.5, a new hook will be available: https://github.com/vaadin/hilla/pull/2505.

If you think this issue is important, add a 👍 reaction to help the community and maintainers prioritize this issue.

platosha commented 3 weeks ago

One suggestion: let's use destructuring for the callback argument to get the item model right away, like so: {Arrays.from(model.people, ({model: personModel}) => <TextField {...field(personModel.name)} />)}

stefanuebe commented 3 weeks ago

The above provided solution does not seem to work in every case. I still get a React error: 

TypeError: Value is undefined
    at ArrayModel.valueOf (http://localhost:8080/VAADIN/@fs/C:/workspace/hilla/node_modules/.vite/deps/chunk-PRZ344WL.js?v=9c5a6b2a:905:13)
    at [Symbol.iterator] (http://localhost:8080/VAADIN/@fs/C:/workspace/hilla/node_modules/.vite/deps/chunk-PRZ344WL.js?v=9c5a6b2a:1006:24)
    at ArrayModel.next (<anonymous>)
    at Function.from (<anonymous>)
    at MyHillariousForm (http://localhost:8080/VAADIN/elements/MyHillariousForm.tsx?t=1718181678530:55:13)
    ...