ListField errors after updating an object field

[ad-boschung]

There is a bug with the ListField when I remove one ObjectField and then display an other item in the Form.

To get the issue, please follow these instructions :

1. Click on "Item 1"
2. Click on "Item 2" -> Until here, Everything works fine.
3. Remove an sub-item from "Item 2"
4. Click on "Item 1" -> CRASH

Error : Uncaught TypeError: Cannot read property 'value' of undefined

App File :

import React, {Component} from 'react';
import ItemForm from '../item/item-form';

const items = [
  {
    id: 1,
    name: 'Item 1',
    code: '1234',
    subitems: [{id: '11', name: 'Item 1.1'}, {id: '12', name: 'Item 1.2'}]
  },
  {
    id: 2,
    name: 'Item 2',
    code: '5678',
    subitems: [{id: '21', name: 'Item 2.1'}, {id: '22', name: 'Item 2.2'}]
  }
];

class TestForm extends Component {
  constructor(props) {
    super(props);
    this.state = {selectedItem: 0};
    this.onItemChange = this.onItemChange.bind(this);
  }

  onItemChange(e) {
    this.setState({selectedItem: e.target.id});
  }

  render() {
    const item = items[this.state.selectedItem];
    return (
      <div>
        <p id={0} onClick={this.onItemChange}>
          Item 1
        </p>
        <p id={1} onClick={this.onItemChange}>
          Item 2
        </p>
        <br />
        <br />
        <ItemForm item={item} />
      </div>
    );
  }
}

export default TestForm;

ItemForm file :

import React, {Component} from 'react';
import {
  Form,
  TextField,
  NumberField,
  ObjectField,
  ListField,
  FormEventsEmitter
} from 'react-components-form';

class ItemForm extends Component {
  constructor(props) {
    super(props);
    this.state = {item: null};
    this.eventsEmitter = new FormEventsEmitter();
  }

  /** Update the state with Props */
  static getDerivedStateFromProps(nextProps) {
    return nextProps;
  }

  render() {
    this.eventsEmitter.emit('reset', this.state.item);
    return (
      <Form
        eventsEmitter={this.eventsEmitter}
        model={this.state.item}>
        <TextField type="text" label="Name" name="name" />
        <NumberField type="number" label="Code" name="code" />
        <ListField label="Subitems" name="subitems">
          <ObjectField>
            <NumberField type="number" label="Id" name="id" />
            <TextField type="text" label="Name" name="name" />
          </ObjectField>
        </ListField>
      </Form>
    );
  }
}

export default ItemForm;

[mprzodala]

Thanks for report this issue. I will work on it.

[ad-boschung]

@mprzodala Nice ! I will explain you the case in which I use it, it will maybe be helpful for you. Or maybe it's not the case that we should use it.

I have two different use cases with the same form :

• Display/Edit an existing item
• Add a new item

I have a list of items, and when I click on it i want to render the item details into the Form. Exactly like in the code above with the items. This means that each time the details component received new props (new item), I set it in my local state and then emit a reset with the new model.

It would be nice if the Form re-render each time the object set to "model" props changed. Like React do with the state. I don't understand why there is a "model" props to set if it's not re-render when the object changed.

[mprzodala]

You can create two instance of ItemForm or more and manage visibility by css classes. I create example here you can check https://codesandbox.io/s/x2p97l93xo . If you want use ListField and ObjectField without issues you should use schema. Without schema there are some issues when you use advanced form structure like this

<Form>
    <ObjectField name="company">
        <ObjectField name="place">
            <ObjectField name="address">
                <TextField name="city" />
                <TextField name="code" />
                <TextField name="country" />
            <ObjectField>
        <ObjectField>
    <ObjectField>
</Form>

Look on this example with schema https://codesandbox.io/s/7m53p53q46

[ad-boschung]

Hmm... I don't think it's a really good approach to create one instance for each items. This is an example with 2 items. But i have some lists with 4000 items...

I already use a schema and I still encounter some issues... i create a new ticket to explain it.

Concerning this problem I found a solution, I set the item id as key props to the ItemForm Component and it fixes the issue with the ListField !