TypeScript Interface Issue with JSX.Element in React

Question

I am trying to create a type for an array in React but I am getting the below error. I am not sure what I am missing here.

Could anyone please help me find out the thing I am missing?

Thanks

interface RowsData {
  [key: string]: string | number | JSX.Element;
}

const rows: RowsData = [
  { id: 1, name: 'A', action: <div style={{ color: 'blue' }}> Hello </div> },
  { id: 2, name: 'B', action: <div style={{ color: 'blue' }}> World </div> },
  { id: 3, name: 'C', action: <div style={{ color: 'blue' }}> Foo </div> }
];

Error

Type '{ id: number; name: string; action: JSX.Element; }' is not assignable to type 'string | number | Element'.
  Object literal may only specify known properties, and 'id' does not exist in type 'Element'.ts(2322)

Did you mean const rows: RowsData[] = [...? i.e. declaring the type of rows as RowData[], not RowsData. — spender
– spender, Commented Sep 1, 2021 at 12:37

Shyam · Accepted Answer · 2021-09-01 12:45:01Z

1

Your typing needs to be changed as,

interface Row {
  id: number;
  name: string;
  action: React.ReactNode;
}

const rows: Row[] = [
  {id: 1, name: 'A', action: <div style={{color: 'blue'}}> Hello </div>},
  {id: 2, name: 'B', action: <div style={{color: 'blue'}}> World </div>},
  {id: 3, name: 'C', action: <div style={{color: 'blue'}}> Foo </div>},
];

answered Sep 1, 2021 at 12:45

Shyam

5,5071 gold badge15 silver badges23 bronze badges

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

4 Comments

newbie Over a year ago

Damnn... facepalm this is what happens when your brain is dead after hours of coding. Thanks a lot man.

Shyam Over a year ago

I think its time for some rest :-)

newbie Over a year ago

Yeah I think the same ;) btw what is the difference between JSX.Element and React.ReactNode and why have you used React.ReactNode?

Shyam Over a year ago

This should answer your question in much detail - stackoverflow.com/questions/58123398/…

Collectives™ on Stack Overflow

TypeScript Interface Issue with JSX.Element in React

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related