S
SolidJS•7d ago
Grahf

Correct type for props.children?

I have wrapper component that wraps an <input> in one component and a <select> in another component. It takese these props: type Props = { action: string workRequestId: string children: JSXElement } Then it's used like this: 
    <UpdateWork
      action='updateWorkAssignment'
      workRequestId={props.workRequestId}
    >
      <input/>
    </UpdateWork>
    <UpdateWork
      action='updateWorkAssignment'
      workRequestId={props.workRequestId}
    >
      <input/>
    </UpdateWork>
    <UpdateWork action='updateWorkStatus' workRequestId={props.workRequestId}>
      <select/>
    </UpdateWork>
    <UpdateWork action='updateWorkStatus' workRequestId={props.workRequestId}>
      <select/>
    </UpdateWork>
I want to capture the name attribute of the input and select in the wrapper. When I try and do that TS says: ts: Property 'name' does not exist on type 'number | boolean | Node | ArrayElement | (string & {})'. Property 'name' does not exist on type 'number'. When I change the type to HTMLFormElement the children say: ts: This JSX tag's 'children' prop expects type 'HTMLFormElement' which requires multiple children, but only a single child was provided.
3 Replies
TechAlchmy
TechAlchmy•7d ago
To capture the name attribute of the child components (<input> or <select>) in your wrapper component, you can utilize the React.cloneElement method, which allows you to pass additional props to the children.
Grahf
GrahfOP•7d ago
sounds really reactish
peerreynders
peerreynders•7d ago
Have a look at: https://docs.solidjs.com/reference/component-apis/children https://www.solidjs.com/tutorial/props_children?solved Your case is probably simple enough that prematurely resolving props.children won't cause a problem.
children - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

Did you find this page helpful?