Rendering Children

The syntax for adding children to a component is the same for class and function components. So we only are going to examine the function component here:

File: src/components/Page.tsx

const Page = ({ title, children }) => {

    return(
        <div>
            <h1>{ title }</h1>
            { children }
        </div>
    )

}
export default Page

caution

The object NEEDS to be destructured as children (reserved word)

And if we incorporate the loop from props we can call it like this:

File: src/App.tsx

import Page from './components/Page'

const App = () => {

    const data = [
        { id: 1, firstname: "John", lastname: "Doe", job: "Developer" },
        { id: 2, firstname: "Anna", lastname: "Tiger", job: "Developer" },
        { id: 2, firstname: "Jim", lastname: "Lion", job: "UX/UI" },
    ]

      return(
        <div>
          <Page title="Employees">
           <ul>
            {
                data.map( (person, index) => {
                    const name = `${ person.firstname } ${person.lastname }`
                    return(
                        <li key={ index.toString() }>{ name }</li>
                    )
                })
            }
            </ul>
          </Page>
        </div>
      )

}


export default App