Multiple items on form

I have an object like this:

const marketplaces = { "test":  { id: 1, url: 'https://www.google.com', name: 'test' }, "test2":  { id: 3, url: 'https://www.google.com', name: 'test' }}

const marketplaces = { "test":  { id: 1, url: 'https://www.google.com', name: 'test' }, "test2":  { id: 3, url: 'https://www.google.com', name: 'test' }}

I need to iterate over that object and show every key into a input inside a form. Like this:

{
  Object.keys(marketplaces).map((key: any) => (
      <Form.Item
          key={marketplaces[key].url}
          name={[marketplaces[key].url]}
          label={marketplaces[key].name}
        >
          <Input />
      </Form.Item>
  ))
}

{
  Object.keys(marketplaces).map((key: any) => (
      <Form.Item
          key={marketplaces[key].url}
          name={[marketplaces[key].url]}
          label={marketplaces[key].name}
        >
          <Input />
      </Form.Item>
  ))
}

Input value has no data

2 Replies

kapa.ai•6mo ago

Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To populate the input fields with data, you need to set the initialValues prop of the Form component. This prop accepts an object where the keys correspond to the name prop of the Form.Item and the values are the initial values for those fields. However, based on the knowledge sources provided, there's no direct example of setting initial values for a dynamic list of form items. The examples provided are for static form items or dynamic form items without initial values. Here's a general example of how you might set initial values for your form items:

<Form
  initialValues={{
    [marketplaces['test'].url]: 'Initial value for test',
    [marketplaces['test2'].url]: 'Initial value for test2',
    // Add more here...
  }}
>
  {
    Object.keys(marketplaces).map((key: any) => (
      <Form.Item
        key={marketplaces[key].url}
        name={marketplaces[key].url}
        label={marketplaces[key].name}
      >
        <Input />
      </Form.Item>
    ))
  }
</Form>

<Form
  initialValues={{
    [marketplaces['test'].url]: 'Initial value for test',
    [marketplaces['test2'].url]: 'Initial value for test2',
    // Add more here...
  }}
>
  {
    Object.keys(marketplaces).map((key: any) => (
      <Form.Item
        key={marketplaces[key].url}
        name={marketplaces[key].url}
        label={marketplaces[key].name}
      >
        <Input />
      </Form.Item>
    ))
  }
</Form>

In this example, the initialValues prop is set to an object where the keys are the URLs of the marketplaces and the values are the initial values for those fields. Please note that this is a general React and Ant Design usage, and it might need to be adjusted based on the specifics of the Refine framework. For more detailed information, you might want to check the Refine documentation (https://refine.dev/docs/guides-concepts/forms#basic-usage) or the Ant Design documentation (https://refine.dev/docs/ui-integrations/ant-design/components/inputs/custom-inputs#example). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@689846866837373077> kapa.ai is still learning and improving, please let us know how it did by reacting below