title: Object passing to an arrow function with Typescript
body: <h3>Problem: how can I pass a object from a parent component to its child component that is derived from the same interface?</h3>
  <p>I am trying to render a list of tasks by iterating over a list of task objects.
  The problem is happening when I try to pass each object individually to the child component.</p>
  <ul>
  <li>I know instead of passing an object I could pass the attributes of this object separately.</li>
  </ul>
  <p>But is there any solution to pass an entire object?</p>
  <p><strong>Parent</strong></p>
  <pre><code>import {task} from &quot;../structs/types&quot;;
  import Task from &quot;./Task&quot;
  
  interface TasksProp{
      tasks: task[]
  }
  
  const Tasks = (props: TasksProp) =&gt; {
      return (
          &lt;&gt;
              {props.tasks.map((t: task) =&gt; (
                  &lt;Task key={t.id} task={t}/&gt;
              ))}
          &lt;/&gt;
      )
  }
  
  export default Tasks
  </code></pre>
  <p><strong>Child</strong></p>
  <pre><code>import { task } from &quot;../structs/types&quot;
  
  const Task = (t: task) =&gt; {
     return (
         &lt;div className='task'&gt;
             &lt;h3&gt;My Task&lt;/h3&gt;
         &lt;/div&gt;
     )
  }
  
  export default Task
  </code></pre>
  <p><strong>Task Interface</strong></p>
  <pre><code>export interface task {
      id: number,
      text: string,
      day: string,
      reminder: boolean
  }
  </code></pre>