Refer to primitive DOM element class

Question

👋

For example, I want to do this:

const DynamicComponent = condition ? MyComponent : React.div;

const usedDynamicComponent = <DynamicComponent> How cool? </DynamicComponent>;

What do I use there instead of React.div , which is a thing I just made up?

Answer 1

const DynamicComponent = condition ? MyComponent : <div>{this.props.children}</div>;

const usedDynamicComponent = <DynamicComponent> How cool? </DynamicComponent>;

Answer 2

You can access the this.props.children to make a layout kind of thing. You can access the child of some component inside itself by using this.props.children .

class Div extends Component {
  render() {
    return <div {...this.props} >{this.props.children}</div>;
  }
}

This will wrap anything you put inside the Div tag between the HTML div tag. To access the props of the component given to the <Div> , you can simply add {...this.props} , it will add all your props on the actual div .

You can use the above-given component like:

<Div className="custom" custom_prop="value"><AnyReactComponent /></Div>

will convert to:

<div className="custom" custom_prop="value"><AnyReactComponent /></div>