React typescript pass array of name in the props

August 17, 2023

I writing the React Typescript components to take the array of Props value. but the below code giving me the error in the map statement.

Property ‘map’ does not exist on type
‘Readonly’.ts(2339)

Code

import * as React from 'react';

export interface IListNameProps {
    names: string[]
}

export interface IListNameState {

}

export default class ListName extends React.Component<IListNameProps, IListNameState> {

  constructor(props: IListNameProps) {

    super(props);

    this.state = {
    }
  }

  public render() {
    return (
        <ul>
          {this.props.map((name) => (
            <li key={name}>{name}</li>
          ))}
        </ul>
      );
  }
}

What is the correct way of passing array of string to React components?

Thanks

>Solution :

You need to iterate over names which you passed as props
Also I don’t see benefit of using class component its confusing, here I updated the syntax. But if you prefer to use class then just update the this.props.map to this.props.names.map

import * as React from 'react';

export interface IListNameProps {
  names: string[]
}


export default function ListNames(props: IListNameProps) {
  return (
    <ul>
    {props.names.map((name) => (
      <li key={name}>{name}</li>
    ))}
  </ul>
  );
}