JSX support for schema

[possumop]

Is there a way to use a JSX component for the help field in AutoForm schema? I want to use an anchor tag to provide a link.

const schema = {
  title: "Person",
  type: "object",
  properties: {
    firstName: { type: "string", help: <a href="#">click here</a> },
    lastName: { type: "string" },
  },
  required: ["firstName", "lastName"],
};

[radekmie]

Hi @possumop, sorry for the late response. I believe you're using the AntD or Bootstrap theme, right? If so, you can pass the help prop, as well as any other, through the uniforms property. Like this:

const schema = {
  title: "Person",
  type: "object",
  properties: {
    firstName: { type: "string", uniforms: { help: <a href="#">click here</a> } },
    lastName: { type: "string" },
  },
  required: ["firstName", "lastName"],
};

Keep in mind it won't work in our playground, but it will in your project.

[possumop]

@radekmie I am getting RangeError Maximum call stack size exceeded as error. Here is a Code Sandbox URL: https://codesandbox.io/s/yhyu5

[radekmie]

I've never seen this problem, but it looks like it's a known limitation of Ajv: ajv-validator/ajv#802. I've tried to look for the serialize option but it seems not to exist anymore. In this case, I don't think it's possible to specify a JSX node in the schema, sorry.