SolidJSS
SolidJS•3y ago•
10 replies
Grahf

solidJS equivalent of react's cloneElement

I'm trying to convert a react component that uses cloneElement to a solidJS component. I've briefly glanced at some of the messages on discord concerning cloneElement and I haven't seen anything definitive. lxsmnsyc mentioned using solid-headless.

Original react code:
import React from 'react';
import T from 'prop-types';

import allowed from '../utils/allowed';

function Thead(props) {
  const { children } = props;

  return (
    <thead data-testid="thead" {...allowed(props)}>
      {React.cloneElement(children, { inHeader: true })}
    </thead>
  );
}

Thead.propTypes = {
  children: T.node,
};

Thead.defaultProps = {
  children: undefined,
};

export default Thead;


This is as far as I got with my solidJS conversion:
import allowed from '../utils/allowed'

export const Thead = (props: any) => {

  return (
    <thead data-testid='thead' {...allowed(props)}>
      {React.cloneElement(props.children, { inHeader: true })}
    </thead>
  )
}


This is what chatGPT recommended: 
   <thead data-testid="thead" {...allowed(props)}>
      {props.children && typeof props.children === 'function' ? children({ inHeader: inHeader() }) : null}
    </thead>
Was this page helpful?