Getting "No applicable renderer found" when using React and JSONSchema Form - reactjs

Question

I'm learning React and decided to check out JSON Forms ( https://jsonforms.io/docs/tutorial ).
I can get the seed app from https://github.com/eclipsesource/jsonforms-react-seed running, and I also experimented with moving all the form-related stuff into its own component, instead of putting it all in index.js. That works great in the seed app.
Then I decided to try to set up the demo form from the playground schema ( https://mozilla-services.github.io/react-jsonschema-form/ ) in the seed app, just to make sure I knew how to change a form.
This is where the wheels came off. Instead of a form, I get "No applicable renderer found."
I copied the three inputs in the playground ( schema, UISchema, and formData ). Below is the code from the separate component, with the schema, uischema, and data taken directly from the playground data jsonschema provides:
import { JsonForms } from '#jsonforms/react';
import React from 'react';
import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import { Actions, jsonformsReducer } from '#jsonforms/core';
import { materialFields, materialRenderers } from '#jsonforms/material-renderers';
const data = {
firstName: "Chuck",
lastName: "Norris",
age: 75,
bio: "Roundhouse kicking asses since 1940",
password: "noneed"
};
const schema = {
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": [
"firstName",
"lastName"
],
"properties": {
"firstName": {
"type": "string",
"title": "First name"
},
"lastName": {
"type": "string",
"title": "Last name"
},
"age": {
"type": "integer",
"title": "Age"
},
"bio": {
"type": "string",
"title": "Bio"
},
"password": {
"type": "string",
"title": "Password",
"minLength": 3
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10
}
}
};
const uischema = {
"firstName": {
"ui:autofocus": true,
"ui:emptyValue": ""
},
"lastName": {
"ui:autofocus": true,
"ui:emptyValue": ""
},
"age": {
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"ui:widget": "textarea"
},
"password": {
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"telephone": {
"ui:options": {
"inputType": "tel"
}
}
};
const store = createStore(
combineReducers({ jsonforms: jsonformsReducer() }),
{
jsonforms: {
fields: materialFields,
renderers: materialRenderers
},
}
);
store.dispatch(Actions.init(data, schema, uischema));
function SampleForm() {
return (
<div>
<Provider store={store}>
<JsonForms />
</Provider>
</div>);
}
export default SampleForm;
index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
registerServiceWorker();
and finally, the app itself, App.js, looks like this:
import React from 'react';
import './App.css';
import SampleForm from './sampleform';
const styles = {
container: {
padding: '1em'
},
title: {
textAlign: 'center',
padding: '0.25em'
},
dataContent: {
display: 'flex',
justifyContent: 'center',
borderRadius: '0.25em',
backgroundColor: '#cecece',
},
demoform: {
margin: 'auto'
}
};
const App = () => (
<div>
<SampleForm/>
</div>
);
export default App;

Answer 1

<JsonForms
schema={schema}
uischema={Generate.uiSchema(schema)}
data={data}
renderers={materialRenderers}
/>
https://github.com/eclipsesource/jsonforms/issues/923#issuecomment-374936319