Generate textinputfields according to given number

Hi there,

I want to build a mobile App with following purpose:

  1. Scan a contract ID (textinput field).
  2. Define number of objects (number field).
  3. Generate textinput fields according to the number of objects.
  4. Scan serialnumbers of the objects into the textinput fields.
  5. (Optional) check if there are duplicates in the serialnumbers.
  6. Send data to database.
  7. Clear the form.

I made a simple version of this where you can scan the contract ID to a textinput field and the serial numbers (all) into another one and send it to the database.

Hope someone can help with that.

Hey @twsona!

It's possible to display a dynamic number of items using a list collection. I imagine you could, for instance, have a scanner component with multiscan enabled:

You can then pass data from the scanner directly to your list collection:

You could remove duplicates in your data programmatically with something like lodash's _.uniq or _.uniqBy functions.

If you rather have it be with user interaction, or you want to do more manipulation to the data before sending it to a DB you can try creating a temporary state and have that be the Data source for your collection instead. It comes with some handy methods you can use and you can also manipulate it directly using an event handler on your scanner:

Hopefully that gives you some ideas to start from, let me know if it raises any additional questions!