[Solved]-TypeError: Cannot read property 'firstName' of undefined

score:5

You need to guard against it not existing. There are a couple of ways to do that. For instance, the conditional operator:

<div className="col-1">{props.personTo ? props.personTo.firstName : ""}</div>
<div className="col-1">{props.personTo ? props.personTo.lastName : ""}</div>

Live Example:

const Document = props => {
  console.log(JSON.stringify(props));
  return(
    <div className="row">
      <div className="col-3">{props.dateOnLetter}</div>
      <div className="col-1">{props.personFrom.firstName}</div>
      <div className="col-1">{props.personFrom.lastName}</div>
      <div className="col-1">{props.personTo ? props.personTo.firstName : ""}</div>
      <div className="col-1">{props.personTo ? props.personTo.lastName : ""}</div>
    </div>
  );
};

ReactDOM.render(
  <Document dateOnLetter="today" personFrom={{firstName: "Joe", lastName: "Bloggs"}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Another option is to destructure your props on receipt and provide a default for the personTo property:

const Document = ({dateOnLetter, personFrom, personTo = {firstName: "", lastName: ""}}) => {
  return(
    <div className="row">
      <div className="col-3">{dateOnLetter}</div>
      <div className="col-1">{personFrom.firstName}</div>
      <div className="col-1">{personFrom.lastName}</div>
      <div className="col-1">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

Live Example:

const Document = ({dateOnLetter, personFrom, personTo = {firstName: "", lastName: ""}}) => {
  return(
    <div className="row">
      <div className="col-3">{dateOnLetter}</div>
      <div className="col-1">{personFrom.firstName}</div>
      <div className="col-1">{personFrom.lastName}</div>
      <div className="col-1">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

ReactDOM.render(
  <Document dateOnLetter="today" personFrom={{firstName: "Joe", lastName: "Bloggs"}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

You don't have to destructure in the parameter list if you don't want to, and you don't have to destructure everything if you don't want to:

const Document = props => {
  const {personTo = {firstName: "", lastName: ""}} = props;
  return(
    <div className="row">
      <div className="col-3">{props.dateOnLetter}</div>
      <div className="col-1">{props.personFrom.firstName}</div>
      <div className="col-1">{props.personFrom.lastName}</div>
      <div className="col-1">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

Live Example:

const Document = props => {
  const {personTo = {firstName: "", lastName: ""}} = props;
  return(
    <div className="row">
      <div className="col-3">{props.dateOnLetter}</div>
      <div className="col-1">{props.personFrom.firstName}</div>
      <div className="col-1">{props.personFrom.lastName}</div>
      <div className="col-1">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

ReactDOM.render(
  <Document dateOnLetter="today" personFrom={{firstName: "Joe", lastName: "Bloggs"}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

T.J. Crowder 963693

score:1

As Chris Cousins said in a comment, default props are another option:

Document.defaultProps = {
  personTo: {firstName: "", lastName: ""}
};

Storms786 376

Source: stackoverflow.com

[Solved]-TypeError: Cannot read property 'firstName' of undefined - using 'props' in react-Reactjs

Related Query

More Query from same tag