React with Typescript: property map is missing for type

Question

I am new to js/ts but experienced in C#. Now I'm learning React and want to use typescript. I try to add types to this demo project: https://github.com/bradtraversy/projectmanager/tree/master/src .

Code so far:

export interface IProjectItem {
  title: string;
  category: string;
}

export interface IProjects {  
  projects : {
    [index: number]: IProjectItem;  
  };
}


class App extends React.Component<object,IProjects> {

  constructor(props: IProjects) {
    super(props);

  this.state = {
    projects: [
    {
      title: 'Business Website',
      category: 'Web Design'
    },
    ....
  }

  render() {
    return (      
      <div className="App">
        MyApp
        <Projects projects={ this.state.projects }/>
      </div>
    );
  }
}

class Projects extends React.Component<IProjects,object> {    

  render() {    

    if (this.props.projects)
    {
      this.props.projects.map( project => { //ERROR Property map not found for type [index:number]
        console.log(project);
      });
    }
    console.log(this.props);

    return (      
      <div className="projects">
        All Projects
      </div>
    );
  }
}

Obviously the .map() function is not found. I think I have to change the used interfaces/types, but what is the right one?

It should be projects: IProjectItem[] I guess

Aleksey L.
– Aleksey L.

2017-11-30 15:20:11 +00:00
Commented Nov 30, 2017 at 15:20 — Aleksey L.
– Aleksey L., Commented Nov 30, 2017 at 15:20

Joe Clay · Accepted Answer · 2017-11-30 15:25:05Z

4

As you suspected, the issue is with your type definitions - in particular, this one:

export interface IProjects {  
  projects : {
    [index: number]: IProjectItem;  
  };
}

What this is saying is, 'an object that implements IProjects will contain projects, which is an object that can be indexed with numbers'. Note that an object that can be indexed with numbers is not the same thing as an array, and will not have any of the array prototype methods like map!

This, on the other hand, will define it as an array:

export interface IProjects {  
  projects: IProjectItem[];
}

answered Nov 30, 2017 at 15:25

Joe Clay

36.1k6 gold badges94 silver badges90 bronze badges

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

2 Comments

Tobias Over a year ago

Thank you for the detailed answer.! What I thought is, that [index: number]: IProjectItem; would result in something similar to c#'s "IDictionary<number, IprojectItem>" which implements IDictionary down the down the inheritance hierarchy - Beginner's mistake.

Joe Clay Over a year ago

@Tobias: If you did want to create a dictionary of numbers to objects, ` [index: number]: IProjectItem is probably how you'd want to do it - however, you can't map over objects in JS without a little bit of boilerplate - see this question/answer: stackoverflow.com/questions/14810506/…

edkeveked · Accepted Answer · 2017-11-30 15:30:20Z

2

You are using this.props.projects.map;

map is for array [].

But your variable projects is a JSON Object;

projects : {
    [index: number]: IProjectItem;  
  };

Change its type. Maybe

project: any[]// you will have a generic array object

Or

project: IProjectItem[] // you will have an array containing items of "IProjectItem"

edited Nov 30, 2017 at 15:30

answered Nov 30, 2017 at 15:23

edkeveked

18.4k10 gold badges60 silver badges95 bronze badges

Collectives™ on Stack Overflow

React with Typescript: property map is missing for type

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related