Learn TypeScript 3 by Building Web Applications

Going further with Functional Components

Let's look at an example with a TodoList component that renders a set of TodoItem components:

import React from 'react'; 
 
export interface TodoItem { 
    id: string; 
    description: string; 
    done: boolean; 
} 
 
type Props = { 
    todo: TodoItem; 
    itemClicked: (id: string) => void; 
}; 
 
export const TodoItem = (props: Props) => { 
    const {todo} = props; 
 
    return <li id={todo.id} onClick={() => props.itemClicked(todo.id)}     style={{backgroundColor: 'gray', cursor: 'pointer'}}>    {todo.description}</li>; 
}; 

Our TodoItem component accepts two inputs:

• It accepts a TodoItem object.
• It accepts a function that will be called when the todo item is clicked upon. Notice that the shape of the required function is clearly defined.

In ...