TypeScript React - iterate over props object

Question

When using TypeScript how do you loop through an object within a React (or SolidJS) components HTML? is there a correct syntax or does it require a work around?

export default function MyComponent(props: any) {
       
    return (
        <>
            {Object.values(props.someObject).map(value => {
                <div>{value.name}</div>       {/* Error: Object is of type 'unknown'. */}
            })}
        </>

    )
}

I'm following this SolidJS tutorial for context: https://youtu.be/WSvmEG7HPyE Specifically id like to use the <For> loop component built into SolidJS which I believe is just a shorthand syntax of map.

<For each={props.someObject}>
{value =>
    <div>{value.name}</div>       {/* Error: Object is of type 'unknown'. */}
}
</For>

thetarnav · Accepted Answer · 2022-07-03 14:05:24Z

1

A simple function like this would be useful for getting the props entries with correct types:

const propsEntries = <T extends Record<string, unknown>>(props: T) =>
  Object.entries(props) as [keyof T, T[keyof T]][];

Then it could be used to map over props using the <For> component:

<For each={propsEntries(props)}>
   {([name, value]) => <li>{name}: {value}</li>}
</For>

demo in playground

answered Jul 3, 2022 at 14:05

thetarnav

8985 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhavesh Daswani · Accepted Answer · 2022-07-03 13:28:53Z

0

In React + typescript you would need to do it in the following way.

type MyComponentProps = {
 someObject: object
}

export default function MyComponent(props: MyComponentProps) {
       
    return (
        <>
            {Object.values(props.someObject).map(value => {
                <div>{value}</div> 
            })}
        </>

    )
}

answered Jul 3, 2022 at 13:28

Bhavesh Daswani

7416 silver badges11 bronze badges

Collectives™ on Stack Overflow

TypeScript React - iterate over props object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related