Passing component and props as arguments - reactjs

Question

I am trying to render a component in App.js based on a MobX observable value. I want to define an action that takes a component and some new custom prop assignments. Here's what I have now:
// App.js inside render()
{ ui_store.main_area_sequence }
.
// ui_store.js
// OBSERVABLES / state
main_area_sequence = <ChoosePostType />;
// ACTIONS / state mutators
update_ui_in_main_section(ComponentTag, props) {
this.main_area_sequence = <ComponentTag {props} />
}
The component argument works as intended. But I can't get the props argument working. Ideally I would use it to build something like:
<ChildComponentToBeSwitchedIn name={ui_store.name} handleClick={this.handleClick} />
A button in <ChoosePostType /> might reassign the observable value in main_area_sequence to the above on click, as one example.
Does anyone know how to pass prop assignments as an argument in order to do this?

Answer 1

I suspect you're overthinking this.
Recall that JSX is just JavaScript. When you type this:
<Foo bar={123}>Baz!</Foo>
...you're really writing this:
React.createElement(Foo, { bar: 123 }, 'Baz!');
What if the component you want to render is dynamic, though? That's fine; it still works. For example, suppose we kept the component and props in our React component's state:
render() {
return (
<this.state.dynamicComponent
{...this.state.dynamicComponentProps}
name={this.props.name}
onClick={this.handleClick}
/>
);
}
The above JSX translates to this JavaScript:
React.createElement(this.state.dynamicComponent,
{ ...this.state.dynamicComponentProps,
name: this.props.name,
onClick: this.handleClick,
}
);
As you can see, we get props from this.state.dynamicComponentProps, but we also add a name prop from this.props.name and an onClick prop from this.handleClick. You can imagine this.handleClick calling this.setState to update dynamicComponent and dynamicComponentProps.
Actually, you don't have to imagine it, because you can see it working in the below snippet:
class DynamicComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
dynamicComponent: ShowMeFirst,
dynamicComponentProps: { style: { color: 'blue' }},
};
}
render() {
return (
<this.state.dynamicComponent
{...this.state.dynamicComponentProps}
name={this.props.name}
onClick={this.handleClick}
/>
);
}
handleClick() {
this.updateDynamicComponent(ShowMeSecond, { style: { color: 'red' }});
}
updateDynamicComponent(component, props) {
this.setState({
dynamicComponent: component,
dynamicComponentProps: props,
});
}
}
const ShowMeFirst = ({ name, style, onClick }) => (
<button type="button" style={style} onClick={onClick}>
Hello, {name}!
</button>
);
const ShowMeSecond = ({ name, style, onClick }) => (
<button type="button" style={style} onClick={onClick}>
Goodbye, {name}!
</button>
);
ReactDOM.render(<DynamicComponent name="Alice"/>, document.querySelector('div'));
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div></div>
I've used plain old React state above, but the same thing works with MobX, as you can see below. (I've never used MobX before, so my code might be less than idiomatic, but hopefully you'll get the idea.)
const { action, decorate, observable } = mobx;
const { observer } = mobxReact;
class UIStore {
dynamicComponent = ShowMeFirst;
dynamicComponentProps = { style: { color: 'blue' }};
updateDynamicComponent(component, props) {
this.dynamicComponent = component;
this.dynamicComponentProps = props;
}
}
decorate(UIStore, {
dynamicComponent: observable,
dynamicComponentProps: observable,
updateDynamicComponent: action,
});
const DynamicComponent = observer(({ store, name }) => (
<store.dynamicComponent
{...store.dynamicComponentProps}
name={name}
onClick={() =>
store.updateDynamicComponent(ShowMeSecond, { style: { color: 'red' }})
}
/>
));
const ShowMeFirst = ({ name, style, onClick }) => (
<button type="button" style={{...style}} onClick={onClick}>
Hello, {name}!
</button>
);
const ShowMeSecond = ({ name, style, onClick }) => (
<button type="button" style={{...style}} onClick={onClick}>
Goodbye, {name}!
</button>
);
ReactDOM.render(<DynamicComponent name="Alice" store={new UIStore()} />, document.querySelector('div'));
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/mobx/lib/mobx.umd.js"></script>
<script src="https://unpkg.com/mobx-react#5.2.3/index.js"></script>
<div></div>
I had to use decorate here since Stack Overflow's Babel configuration doesn't include decorators, but I've posted the same thing with decorators on CodeSandbox: https://codesandbox.io/s/qlno63zkw4

Answer 2

If you aren't passing props, then don't include a props parameter.
update_ui_in_main_section(ComponentTag) {
this.main_area_sequence = <ComponentTag handleClick={this.handleClick} />;
}