Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

272
Views
Is it possible to sub in any element type to JSX in React?

I'd like to create a super general component that can be built with any element type. ie, I'd like to do something like this:

const Wrapper = React.createClass({
  render() {
    const { props } = this;
    const elementType = props.elementType;
    return (
      <{elementType} className={className}>
        {props.children}
      </{elementType}>
    );
  }
});

but of course React gets very angry when I attempt this. Is there any way to build a component with to-be-decided HTML types?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

You can use React.createElement to accomplish that (after all, JSX just provides syntactic sugar for it).

Something like that:

const myElement = React.createElement(

   /* type */
    props.elementType, //must be a string or a React Component class

    /* props object */
    { 
        className: className
    },

    /* You can pass children to the third parameter also. */
    props.children
);

return myElement;
over 4 years ago · Santiago Trujillo Report

0

This depends very much on what elementType is. In JSX, you can either pass in a custom component itself, or a string (e.g. h1, p) as a "tag". In any case, you don't want to put the curly brackets {} around the tag. Very simple example:

// Usually you want to import this. (This is just a stateless component)
const Element = (props) => <em>{props.children}</em>;

class Example extends React.Component {
  constructor() {
    super();
    this.state = { element1: 'h1', element2: Element };
  }
  render() {
    return(
      <div>
        <this.state.element1>Hello!</this.state.element1>
        <this.state.element2>World!</this.state.element2>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('View'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

If you want to use a string as a reference to a custom component, you will need to use native JavaScript with React's createElement/cloneElement.

over 4 years ago · Santiago Trujillo Report

0

Yes, you can — even with JSX if you'd like.

The trick is to understand how JSX is translated into the React.createElement calls:

  • bracketed text starting with a lowercase character is translated into a string: <div/> becomes React.createElement('div').
  • bracketed text starting with an uppercase is assumed to be a variable in scope: <SomeComponent/> becomes React.createElement(SomeComponent).

Now imagine if you assign var SomeComponent = 'div'. Then the uppercase rule would apply (passing the variable to createElement), but it will have the same effect as the first rule (because the variable references a string)!

Here's how it can look in a practical situation:

let Child = ({EL,thing}) => <EL className="helper-thing">{{ thing.name }}</EL>


let ListParent = ({things}) => <ul>
  {things.map(t => <Child EL='li' thing={t}/>)}
</ul>

let ArticleParent = ({things}) => <article>
  {things.map(t => <Child EL='p' thing={t}/>)}
</article>

See the official docs on Choosing the Type at Runtime for a slightly different — perhaps cleaner — approach that capitalizes the property inside the child component.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!