Rendering object in array ---react js

1

Hello friends,
I am really confusing with rendering an object in an array. See my code and give me a suggestion please:

this.state = {
      items: [
        {
          id: "",
          id_message_sender: 
            {
              id: "",
              firstName: ""
            }
          ,
          id_message_receiver:
            {
              id: "",
              firstName: ""
            }
          ,
          message: "",
          send_at: ""
        }
      ]
    };

{this.state.items.map((item, index) => {
          return (
            <div className="container">
              <div className="row">
                <div className="col col-md-3">
                <p>{item.message}</p>
                </div>
                <div className="col col-md-6">
                  <p>{console.log("first name result: ", item.id_message_receiver.firstName)}</p>
                </div>
                <div className="col col-md-3"></div>
              </div>
            </div>
          );
        })}

As you see above this

<p>{console.log("first name result: ", item.id_message_receiver.firstName)}</p>

, it prints first name in the console but I couldn’t display on the page; it display this error

TypeError: item.id_message_receiver is undefined
2

The given code looks fine, no typos for id_message_receiver as far as I can tell. Do you have a replication of the problem in a codepen, or a github link or anything. My guess is the problem is somewhere else beyond the code already given.

The only thing I can think of is the items property in the state actually doesn’t have the id_message_receiver property, but that assumes there is more data then actually given here.