Bug in 'Create a JSON Forms App' tutorial

General
1

Hi,

I tried to set up the person example from this page: Create a JSON Forms App - JSON Forms > Create a JSON Forms App

The form was displayed correctly, however I couldn’t edit/enter any data.
I found that this line was missing: data={data} in this tutorial.

Also, I think the following should be done in App.js, not in index.js:

import { JsonForms } from '@jsonforms/react';
import { materialRenderers } from '@jsonforms/material-renderers';
import { person } from '@jsonforms/examples';

const schema = person.schema;
const uischema = person.uischema;
const data = person.data;

It might be relevant to update the tutorial.

In summary: index.js doesn’t need any changes, App.js could be changed like this:

import React from 'react';
import { JsonForms } from '@jsonforms/react';
import { materialRenderers } from '@jsonforms/material-renderers';
import { person } from '@jsonforms/examples';

const schema = person.schema;
const uischema = person.uischema;
const data = person.data;

class App extends React.Component {
  render() {
    return (
      <div>
         {/* other markup... */}
         <JsonForms 
           data={data}
           schema={schema}
           uischema={uischema}
           renderers={materialRenderers}
         />
      </div>
    )
  }
}

export default App;

Best regards,

Bart

[original thread by Bart Diricx]

2

Hi @bart-diricx, thanks for the report! You can also always check the react seed which the tutorial is meant to reflect. It seems some inconsistencies were introduced over time. I opened an issue for this in our website repository: App tutorials are missing information · Issue #71 · eclipsesource/jsonforms2-website · GitHub