Argument of type 'Element[]' is not assignable to parameter of type 'Element'

Admin 1
Viewed 9877
import React, { Fragment } from 'react'

const Ques = (Props:JSX.Element) => {
    return (
        <Fragment>{Props}</Fragment>
    );
}
const ListName = ["Gus","Thekla","Anna","Sophia"].map((Name)=> <div>{Name}</div>)
Ques(ListName)

in line Ques(ListName) I get this error.

Argument of type 'Element[]' is not assignable to parameter of type > > 'Element'. Type 'Element[]' is missing the following properties from type 'Element': > type, props, key

typescript reactjs
1 Answers

You are passing an array of JSX.Element,

const Ques = (Props:JSX.Element[]) => {
    return (
        <Fragment>{Props}</Fragment>
    );
}
const ListName = ["Gus","Thekla","Anna","Sophia"].map((Name)=> <div>{Name}</div>)
Ques(ListName)

When you run this code, you’ll be given a warning that a key should be provided for list items. A “key” is a special string attribute you need to include when creating lists of elements.

I would write like this

const Ques = (Props:JSX.Element[]) => {
    return (
        <Fragment>{Props}</Fragment>
    );
}
const ListName = ["Gus","Thekla","Anna","Sophia"].map((Name,nameindex)=> <div key={`${Name}${nameindex/10}`}>{Name}</div>)
Ques(ListName)

You can read about the keys here link.

user_122167350
Related