uniforms library not supported

[waheed25]

i want to pass a component to react json schema which is the imported from uniforms bootstrap4 this is the library for json forms i want to passs this component to react json schema like that
import AutoForm from 'uniforms-bootstrap4/AutoForm';
but when i am passing this to children it didn't render anything

`const schema = {
component: 'div',
children:[{
component:'AutoForm',
props: {
// validate:"onSubmit",
schema:loginSchema,
// onSubmit:(docs) =>{console.log('submit')},
// placeholder:true,
// label:true
},
}]

};

and here is my login schema

`const loginSchema = new SimpleSchema({
email: {
type: String,
max: 50,
regEx: SimpleSchema.RegEx.Email,
uniforms:{
placeholder:'Email',label:false,
type: 'email'
}
},
password:
{
type: String,
max: 100,
uniforms: {type: 'password',
placeholder:'Password',label:false

  }
  },

Remember: {
type: Boolean,
label:'Remember me',
defaultValue: false,
optional:true,
uniforms: {type: 'password',
placeholder:'Password',

}

},
});`
export default () => parseJsonSchema(schema);

other components are rendering but not this one

[nlaffey]

Hi @waheed25,

You may be already doing this but I don't see it in your provided coded. For non-native elements/components you'll need to register the component with react-json-schema via the setComponentMap method. Something along these lines:

import AutoForm from 'uniforms-bootstrap4/AutoForm'

const myReactJsonSchema = new ReactJsonSchema();

myReactJsonSchema.setComponentMap({AutoForm: AutoForm});

Once you've told react-json-schema what 'AutoForm' means via the setComponentMap method I would expect it to use that component and render correctly.

There's some more detail here in the README: https://github.com/TechniqueSoftware/react-json-schema#component-mapping

Let us know if that doesn't work. Thanks for the interest.

[nlaffey]

@waheed25 I realized another way that may be simpler depending on how you're organizing your code.

When defining the schema you can pass it a direct reference to the component rather than a string of the component name:

component: AutoForm vs component: 'AutoForm'

So your schema would be more like:

import AutoForm from 'uniforms-bootstrap4/AutoForm';

const schema = {
component: 'div',
children:[{
component: AutoForm,
props: { foo: 'bar'}
}]
}

Hope that helps.

[waheed25]

i am also registering my component but this didn't work.
i have also tried the second solution
component: AutoForm vs component: 'AutoForm'
but this didn't work too

[eiof]

@waheed25 are you able to render the AutoForm component outside of react-json-schema? If so, can you post an example on how to do so? I cannot get AutoForm to render outside of react-json-schema.

[waheed25]

yes i am rendering AutoForm component outside of react-json-schema and its working .
import AutoForm from 'uniforms-bootstrap4/AutoForm'; import SimpleSchema from 'simpl-schema';

`<AutoForm
validate="onSubmit"
schema={schema}
onSubmit={(docs)=>this.onSubmit(docs)}
placeholder={true}
label={true}
submitField={() => MySubmitField(this.state.disable)
boolField={MyBoolField}
/>
abc

                           </AutoForm>`

and here is schema

` const schema = new SimpleSchema({
email: {
type: String,
max: 50,

 regEx: SimpleSchema.RegEx.Email,
 uniforms:{
   placeholder:'Email',label:false,
   type: 'email'
 }

},

password:
{
type: String,
max: 100,
uniforms: {type: 'password',
placeholder:'Password',label:false

   }
 },

Remember: {
type: Boolean,
label:'Remember me',
defaultValue: false,
optional:true,
uniforms: {type: 'password',
placeholder:'Password',

 }

},`

[eiof]

@waheed25 I was unable to reproduce your issue. If you want to post the code in a runtime environment somewhere, like codepen or jsfiddle, we can investigate it more. For now, I'm closing this issue.