score:2

Accepted answer

one approach would be to have a function that returns your component function:

function createcomponentclass(ele, name, styles, children) {
  return (props) => {
    const { classname, style, id } = props;
    return (
      <ele classname={`${name} ${classname}`} style={...{styles.container}, ...{style}} id={id}>
        {children(props)}
      </ele>
    );
  };
}

const modal = createcomponentclass('div', 'modal', { container: { ... } }, (props) => {
  return (
    <>
      {!props.hidden && <extracontent />}
      {props.children}
    </>
  );
});

const votebutton = createcomponentclass('div', 'votebutton', { container: { ... } }, (props) => {
  let img = pressed ? './img_pressed.jpg' : './img_not_pressed.jpg';
  return <img src={img} />;
});

const navbar = createcomponentclass('nav', 'navbar', { container: { ... } }, (props) => {
  return (
    <>
      {links.map(lk => <a href={lk.href}>{lk.text}</a>
      {children}
    </>
  );
});

Related Query

More Query from same tag