React/Mobx: Adding checkbox handler breaks a textarea field - reactjs

Question

I recently added a few checkboxes to a component. In the map function below, 5 of them are rendered.
After attaching a checkbox onchange handler, not only did the check/uncheck action fail to implement, but editing the text of a textarea in this component now breaks the editing function and causes an infinite loop in MobX (in the console).
However, removing the onChange handler from the checkboxes immediately fixes the issue with the textarea.
I don't see how the 2 are related, does anyone know what is happening? Here is the component:
const FinalEditsAndCopy = (props) => {
const update_final_textarea = (text_input) => {
ui_store.set_final_text_message(text_input.target.value);
console.log(text_input.target.value);
};
const render_social_media_checkboxes = () => {
return static_local_data.social_media_sites.map((social_media_site, i) => (
<List.Item key={i}>
<List.Content>
<input
type="checkbox"
checked={ui_store.final_social_media_site_selections[social_media_site]}
name={social_media_site}
className={ checkbox_style }
onChange={ ui_store.reverse_checkbox_state(social_media_site) } // This is the line that breaks the textarea and also does not fill its intended purpose
/>
{Lodash.capitalize(social_media_site)}
</List.Content>
</List.Item>
))
};
const render_social_media_checkboxes_test = () => {
return static_local_data.social_media_sites.map((social_media_site, i) => (
<List.Item key={ i }>
<List.Content>
<p>Test</p>
</List.Content>
</List.Item>
));
};
return (
<div className={ outer_container_style }>
<Container>
<Form>
<TextArea autoHeight
value={ ui_store.final_text_message }
className={ textarea_style }
onChange={ update_final_textarea }
/>
<Message attached='bottom' positive className={ alert_style }>
<Icon
name='clipboard list'
color='green'
size='big'
/>
Copied to clipboard
</Message>
</Form>
<Header size='small'>Select Social Media Sites</Header>
<div>
<List horizontal>
{render_social_media_checkboxes()}
</List>
</div>
<Button size='huge' color='orange'>Copy Text and Open Social Media Sites in New Tabs</Button>
</Container>
</div>
);
};
export default observer(FinalEditsAndCopy);
MobX observables in ui_store:
final_text_message = '';
final_social_media_site_selections = {
"facebook" : true,
"twitter" : true,
"linkedin" : true,
"instagram" : true,
"pinterest" : true
};
And the relevant actions:
set_final_text_message(input_message) {
this.final_text_message = input_message
}
reverse_checkbox_state(social_media_site) {
this.final_social_media_site_selections[social_media_site] = !this.final_social_media_site_selections[social_media_site]
}

Answer 1

You are invoking reverse_checkbox_state directly on render. You want to give onChange a function that will be called when the change event occurs, not invoke the function yourself.
<input
type="checkbox"
checked={ui_store.final_social_media_site_selections[social_media_site]}
name={social_media_site}
className={ checkbox_style }
onChange={() => ui_store.reverse_checkbox_state(social_media_site)}
/>