handleChange with React and Mobx

Question

On Step 2 of my web app, an observable string value is assigned inside a MobX store. It is then rendered as a textarea value when the Step 3 component render is triggered.

I have been following the React docs at https://reactjs.org/docs/forms.html to handle manual changes to the textarea value but have not been successful.

My textarea in the Step 3 functional component (imported from Semantic UI React):

<TextArea autoHeight
          value={ ui_store.final_text_message }
          className={ textarea_style }
          onChange={ () => update_final_textarea }
/>

A change handler in the same component:

const update_final_textarea = (text_input) => {
    ui_store.set_final_text_message(text_input.target.value);
    console.log(text_input.target.value);
};

A mobx action to mutate the observable value controlling the state:

set_final_text_message(input_message) {
    this.final_text_message = input_message
}

From my console it does not appear that the local change handler is firing. I am backspacing and pressing characters in the textarea but the text from step 2 is locked there, unchanging.

Can anyone spot my current error? Thanks

Tholle Tholle · Accepted Answer · 2018-08-11T18:58:23

You are not invoking the update_final_textarea function inside your inline arrow function. You could just give the function itself to the onChange prop instead.

<TextArea
  autoHeight
  value={ui_store.final_text_message}
  className={textarea_style}
  onChange={update_final_textarea}
/>

You could also put all the logic inline if you prefer.

<TextArea
  autoHeight
  value={ui_store.final_text_message}
  className={textarea_style}
  onChange={event => ui_store.set_final_text_message(event.target.value)}
/>

handleChange with React and Mobx

1 Answers