Custom array component

[Zetra416]

hi continue from my previous question about using array type field, i have another question, so i have this kind of schema in my code with jsonschema

(() => {
  const ajv = new Ajv({ allErrors: true, useDefaults: true, keywords: ["uniforms"] });
  const schema = {
    title: 'Address',
    type: 'object',
    properties: {
     aa : {
        type: 'array',
        items: { type: 'object',
        properties: {
         city: { type: 'string' },
         state: { type: 'string' },
         street: { type: 'string' },
         option: { type: 'string', uniforms: { options: [
          { label: 'Option A', value: 'a' },
          { label: 'Option B', value: 'b' },
        ]} },
     }
    }
      },
    },
  };

  function createValidator(schema) {
    const validator = ajv.compile(schema);

    return (model) => {
      validator(model);

      if (validator.errors && validator.errors.length) {
        return { details: validator.errors };
      }
    };
  }

  const schemaValidator = createValidator(schema);

  return new JSONSchemaBridge(schema, schemaValidator);
})()

but it seems it cant use any custom component, is there any way so i cant apply my custom component in this schema ?

so the problem
expected result : use custom component (multi select from antd)

current result : use select component

[radekmie]

Hi @Zetra416. There are two things here:

1. To have a multi-select, your schema has to accept multiple values. That means, it has to be an array of strings, not a single string:

   option: {
     type: "array",
     uniforms: {
       options: [
         { label: "Option A", value: "a" },
         { label: "Option B", value: "b" },
       ],
     },
     items: { type: "string" },
   },

2. The above code will use a multi-select out of the box. If you'd like to provide your own custom component, then follow this guide.