react input component gets store overwritten onChange

Question

Ok, I'm new to react and mobx, and I'm experiencing some issues to manipulate the store.

When I'm typing at the input, the value gets overwritten for each char typed.

The component:

@withStore
@observer
class ConfigModel extends Component {
    configModel;

    constructor(props) {
        super(props);
        this.configModel = this.props.store.configModelStore;
    }

    render() {
        const fieldsObj = this.configModel.modelConfig;
        const fieldHelpers = this.configModel.helperModelStore.modelConfig;
        const callbackOnChange = this.configModel;

        const campos = merge(fieldHelpers, fieldsObj); // _.merge()

        return (
            <Form key={'configModelForm'}>
                <>
                    {Object.entries(campos).map((campo) => {
                        if (campo[1].advanced) {
                            return;
                        }
                        if (campo[1].type === 'input') {
                            return (
                                <InputRender
                                    key={campo[1].id}
                                    field={campo[1]}
                                    onChange={callbackOnChange.valueOnChange}
                                />
                            );
                        }
                    })}
                </>
            </Form>
        );
    }
}

And my store define some observables (some options were omitted for simplicity, like the type evaluated at the component above):

  @observable modelConfig = [{
      id: 'postType',
      value: '',
      disabled: false,
      advanced: false,
    },
    {
      id: 'pluralName',
      value: '',
      disabled: false,
      advanced: true,
    },
    ...
  ]

And also define some actions:

  @action valueOnChange = (e, {id, value}) => {
    this.modelConfig.filter((config, index) => {
      if (config.id === id) {
        this.modelConfig[index].value = value;
        console.log(this.modelConfig[index].value);
      }
    });

The console.log() above prints:

I truly believe that I'm forgetting some basic concept there, so can someone spot what am I doing wrong?

*EDIT:

I have another component and another store that is working correctly:

@observable name = '';
  @action setName = (e) => {
    this.name = e.target.value;
    console.log(this.name);
  }

So my question is:

Why the action that targets a specific value like this.name works fine and the action that targets a index generated value like this.modelConfig[index].value doesn't works?

score 0 · Answer 1 · answered Oct 28 '20 at 23:16

The problem was at the <InputRender> component that was also receiving the @observable decorator. Just removed and it worked.

// @observer <---- REMOVED THIS
class InputRender extends Component {
    render() {
        const item = this.props.field;
        return (
            <InputField
                id={item.id}
                label={
                    <InfoLabel
                        label={item.label}
                        action={item.action}
                        content={item.popupContent}
                    />
                }
                placeholder={item.placeholder}
                onChange={this.props.onChange}
                value={item.value}
                disabled={item.disabled}
                error={item.error}
                throwError={item.throwError}
            />
        );
    }
}

react input component gets store overwritten onChange

1 Answers1