React with Typescript: Types for array.map() with arrow function

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 .

export interface IProjects {  
  projects: IProjectItem[];
}

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

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

  constructor(props: IProjects) {
    super(props);
  }
  render() {    
    let projectItems = this.props.projects.map( project  => {
      return (            
        <ProjectItem project={project} /> //Error: the type "{ project: IProjectItem; }" is not assignable to "Readonly<IProjectItem>"
      );  
    });
    ...
}

class ProjectItem extends React.Component<IProjectItem,object> {    
 ...
}

What I thought is that "project" within the arrow function is of type "IProjectItem" and that's the right type for the component "ProjectItem". It seems I'm doing something wrong with the used types. I only have added types to the example mentioned above as video from https://www.youtube.com/watch?v=A71aqufiNtQ ( @ ~ 21:06 ) What are the right types using the given example?

I don't know React well but maybe return (<ProjectItem project=project />)? It seems like it doesn't like you wrapping the IProjectItem in an object. — Anthony Mills
– Anthony Mills, Commented Dec 1, 2017 at 14:52
tha's not the Probelm, curly braces are jused in .jsx/.tsx files for marking js code within html. It works like done in the linked video tutorial. — Tobias
– Tobias, Commented Dec 1, 2017 at 15:03

LoremIpsum · Accepted Answer · 2017-12-01 15:15:10Z

1

Your current ProjectItem class doesn't accept as its props a project object, but its props are defined by the IprojetItem interface (i.e. it accepts title and category as props).

Instead of

class ProjectItem extends React.Component<IProjectItem,object> {    
     ...
}

You should write

export interface ProjectItemProps {
  project: IprojectItem;
}

class ProjectItem extends React.Component<ProjectItemProps, object> {    
 ...
}

answered Dec 1, 2017 at 15:15

LoremIpsum

4,4281 gold badge17 silver badges17 bronze badges

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

2 Comments

Tobias Over a year ago

Ok, just to understand it right: When I map this.props.projects.map( project => ... ) the type of project is IprojectItem. But when I use IProjectItem as first generic type of a Component : It does not mean, that the property parameter of this component needs to be a object implementing this interface ( like it would be on C# or java?)

LoremIpsum Over a year ago

Yes it does, but you're missing the point here. Whatever gets passed as first type of React.Component<A, B> (i.e. as A here) will define the props interface for this component. You don't want the props to be a, IProjectItem, you want the props to accept one property named project that'll have the IProjectItem type. Got it ?

Collectives™ on Stack Overflow

React with Typescript: Types for array.map() with arrow function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related