// This is what I was trying to ask you last night about how ts plays with arg destructuring

import React, { Component } from 'react';

// destructuring args in fn definition
const DisplayName = ({ name, country }) => <p>{name} lives in {country}</p>

export default class App extends Component {
    render() {
        return (
            <DisplayName
                name={'Josh'}
                country={'USA'}
            />
    }
}

// maybe ts wants this?
const DisplayName = ({ name: string, country: string }): string => <p>{name} lives in {country}</p>

// But in normal js that's equivalent to renaming the `name` prop on `props` to `string`.
// As well as doing the same for `country` (which could throw an error as is, re-assigning to same variable name).
// For instance, in normal js, with what is above, you're saying "Ok I'm grabbing the `name` prop off the object that is
// passed into `DisplayName`, but then I'm renaming it `string`, so in the fn body, I can start using `string`
// and it will refer to whatever the value of `name` is.

// Here's the answer
const DisplayName = ({ name, country }: { name: string, country: string}): string => <p>{name} lives in {country}</p>

// YAY