Props in Class Components

Implementation of the "Employee Card".

File: src/App.tsx

import React, { Component } from 'react'
import Profile from './components/Profile'

class App extends Component {

  render() {

    const person = {
      id: 1, 
      firstname: "John",
      lastname: "Doe",
      job: "Developer"
    }

    return(
      <div>
        <Profile person={ person } />
      </div>
    )
  }
}

export default App

File: src/components/Profiles.tsx

import React, { Component } from 'react'

class Profile extends Component {

  render() {

    const name = `${ this.props.person.firstname } ${ this.props.person.lastname }`

    return(
      <div>
        <h2>Profile</h2>
        <h3>{ name }</h3>
      </div>
    )
  }
}

export default Profile

As you can see, we don't need to specify the incoming data, as the exented React class Component already incorporates a constructor which passes the arguments into the class. We can reference the props with this.props. followed by the name we passed in the calling of the component.

info

When using TypeScript you can (and must) specifiy the incoming data.