(Medium) Front-End Separation

GivenNameSurnameProblems.diff

//=============================
// THE API BACK-END PROJECT
//=============================

const userDetailsParsedResponseBody = {
-  givenName: 'John',
-  surname: 'Doe',
+  firstName: 'John',
+  lastName: 'Doe',
};

// ...

//=============================
// THE CLIENT FRONT-END PROJECT
//=============================

// ...

render() {
   const userDetails = this.props.userDetails;
    return <section>
      // 🔥🔥 BOOM 🔥🔥 <h1>undefined undefined</h1>
      <h1>{userDetails.givenName + ' ' + userDetails.surname}</h1>

// ...