How to convert it to JSX?

Question

React

size - this is what the tag should be (h1, h2, h3, h4, h5, h6)
How can I convert this code to JSX

export const Headline = ({ children, className, size }) => {
  return React.createElement(size, { className: classNames(s[size], className) }, children);
};

Answer 1

Replace size with something that starts with a capital letter, like this:

const Headline = ({ children, className, size: Tag }) => {
  return <Tag className={classNames(s[Tag], className)}>{children}</Tag>;
};