How to create an array of HTML Buttons in TypeScript and React

Question

I want to create an array of Buttons which will be rendered by React. The Button is a standard HTML element.

let buttons: HTMLButtonElement[] = []
for(let [key, value] of SomeMap) {
    buttons.push(<button onClick={...}>{value}</button>)
}

But this gives me

Argument of type 'Element' is not assignable to parameter of type 'HTMLButtonElement'. Type 'ReactElement<any, any>' is missing the following properties from type 'HTMLButtonElement': disabled, form, formAction, formEnctype, and 300 more.

and

Type 'HTMLButtonElement[]' is not assignable to type 'ReactNode'. Type 'HTMLButtonElement[]' is not assignable to type 'ReactFragment'. The types returned by 'Symbol.iterator.next(...)' are incompatible between these types. Type 'IteratorResult<HTMLButtonElement, any>' is not assignable to type 'IteratorResult<ReactNode, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorResult<ReactNode, any>'. Type 'IteratorYieldResult' is not assignable to type 'IteratorYieldResult'. Type 'HTMLButtonElement' is not assignable to type 'ReactNode'. Type 'HTMLButtonElement' is missing the following properties from type 'ReactPortal': key, props How woould I create an empty array that can hold buttons in React and TypeScript?

four-eyes · Accepted Answer · 2023-01-05 14:17:58Z

1

This can be done with

let buttons: JSX.Elements[] = []

answered Jan 5, 2023 at 14:17

four-eyes

12.7k37 gold badges135 silver badges258 bronze badges

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

Collectives™ on Stack Overflow

How to create an array of HTML Buttons in TypeScript and React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related