TypeError: Cannot read property 'title' of undefined on React

Question

Consistently getting TypeError: Cannot read property 'title' of undefined when trying to load of my page. I am certain its related to my props but cannot figure what I am doing wrong.

I've tried going through every single prop and editing it but I continue to get the same error just for the next "person title" after.

import React from "react";

 const Personcard = props => {
const handleUpdate = () => {
props.handleEdit(props.person.id);
};

return (
<div className="container">
  <div className="containerUsers">
    <div className="card">
      <img
        // src={props.person.primaryImage.imagineUrl}
        id="primaryImageUsers"
        alt=""
      />

      <div className="card-body">
        <div className="card-title">
          <h2>
            {props.person.title === "Mr" && (
              <span id="titleUsers"> {props.person.title}</span>
            )}
          </h2>
        </div>
      </div>
      <div className="card-text">
        <h4>
          <span id="headlineUsers" value={props.person.headline}>
            {" "}
          </span>
        </h4>
        <p>
          <span id="summaryUsers" value={props.person.summary}>
            {" "}
          </span>
        </p>
        <p>
          <span value={props.person.skills}> </span>
        </p>
      </div>

      <button
        type="button"
        className="btn btn-warning"
        onClick={handleUpdate}
      >
        {" "}
        Update{" "}
      </button>

      <button type="button" className="btn btn-danger">
        Delete
      </button>
    </div>
  </div>
</div>
  );
 };


My goal is to display registered users on a homepage.

Can you post the code where you're rendering <Personcard>? It would be good to see how you're passing in the person prop. — helloitsjoe

Sultan H. Sultan H. · Accepted Answer · 2019-07-26T23:20:44

What you actually need to do is check for props.person whether it exists or not.

There are two cases:

It exists: we return the containerUsers.
It doesn't: we return a loading compoent.

We can check for it as this props.person ? true:false, true will be where we return the containerUsers, false where we will be returning the loading component.

import React from "react";

const Personcard = props => {
  const handleUpdate = () => {
  props.handleEdit(props.person.id);
  };

  return (andleUpdate = () => {
  props.handleEdit(props.person.id);
  };

  return (
    <div className="container">
      {
        props.person ? (
          <div className="containerUsers">
            <div className="card">
              <img
                // src={props.person.primaryImage.imagineUrl}
                id="primaryImageUsers"
                alt=""
              />

              <div className="card-body">
                <div className="card-title">
                  <h2>
                    {props.person.title === "Mr" && (
                      <span id="titleUsers"> {props.person.title}</span>
                    )}
                  </h2>
                </div>
              </div>
              <div className="card-text">
                <h4>
                  <span id="headlineUsers" value={props.person.headline}>
                    {" "}
                  </span>
                </h4>
                <p>
                  <span id="summaryUsers" value={props.person.summary}>
                    {" "}
                  </span>
                </p>
                <p>
                  <span value={props.person.skills}> </span>
                </p>
              </div>

              <button
                type="button"
                className="btn btn-warning"
                onClick={handleUpdate}
              >
                {" "}
                Update{" "}
              </button>

              <button type="button" className="btn btn-danger">
                Delete
              </button>
            </div>
          </div>
        </div>
        ) : null
      }
  );
 };

In the code I provided, instead of null, return a loading component if you want.

it's the last line in the return function. should be: ( <Loading /> ) for example.

So, I did this because, person is not defined at the first mount of the component, that's why we checked for it.

Currently this will solve the problem, but I prefer if you pass a default value for props.person from the parent component, it can be a plain object {} with nothing without it.

TypeError: Cannot read property 'title' of undefined on React

1 Answers