How to use react-jsonschema-form in react?

Question

i have an issue with building forms in react with json. I've installed react-jsonschema-form but I just can't get it to work. I have the package installed locally, I am using TypeScript and I'm using nx/nrwl. This is what I've tried.

import React from 'react';
import './form.scss';

const Form = JSONSchemaForm.default;
const schema = {
    type: "string"
};

/* eslint-disable-next-line */
export interface FormProps {
    json: any;
}


export const FormComponent = (props: FormProps) => {
        return (
            <>
                <Form schema={schema}/>
            </>
        );
    }
;

export default FormComponent;

The question is where do i get the JSONSchemaForm variable from?

For example, this little snippet works like a charm https://codepen.io/krcaltomas99/pen/abvaJdb

Thanks for your advice!

Answer 1

The JSONSchemaForm is the name of the export that is loaded into your web app if you use the CDN script import method.

Since you said you installed the package, you can justuse the import syntax (i.e. import Form from "@rjsf/core";) and let your bundler take care handling the library dependency rather than modify your index.html to include the CDN script.