How to validate an array of objects correctly?

Question

I am trying to validate an array of objects I get from the parent component, but I get the following error message on the console:

Warning: Failed prop type: The prop `messageList [0] .lastMessage` is marked as required in` MessageList`, but its value is `undefined`.
    in MessageList (at Sidebar / index.js: 135)
    in Sidebar (at App.js: 11)
    in App (at src / index.js: 5)

What I don't understand is that all my indexes are correct, the list is rendering correctly and no properties are getting undefined.

What am I doing wrong?

MAIN COMPONENT:

import React, { Component } from "react";

// STYLES
import { ContainerMain, ContainerMessage, Header, UserAvatar } from "./styles";

// SUBCOMPONENT'S
import MessageList from "../MessageList";
import SearchMessage from "../SearchMessage";

class Sidebar extends Component {
  state = {
    testUser: [
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "THIAGO DE BONIS",
        message: {
          amountOfUnreadMessage: 100,
          lastMessageTime: "00:00",
          lastMessage: "Curabitur sit amet vestibulum quam."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "FELLIPE ESTEVES",
        message: {
          amountOfUnreadMessage: 20,
          lastMessageTime: "18:54",
          lastMessage:
            "Praesent sit amet justo vitae enim euismod convallis sit amet sit amet ligula."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 1",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "POSUERE PORTTITOR EQEQEQE",
        message: {
          amountOfUnreadMessage: 5,
          lastMessageTime: "13:20",
          lastMessage:
            "Curabitur sit amet vestibulum quam. Aliquam vel ornare orci, sed eleifend metus."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 22",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 2",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 3",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 4",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 5",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      },
      {
        avatar:
          "https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png",
        name: "LOREM IPSUM 6",
        message: {
          amountOfUnreadMessage: 90,
          lastMessageTime: "09:40",
          lastMessage:
            " Aenean finibus enim eget nisl dapibus, eget facilisis velit elementum."
        }
      }
    ]
  };

  render() {
    return (
      <ContainerMain>
        <Header>
          <div>
            <UserAvatar src="https://account.wpcaptain.com/app/views/client/ep4/lutfi-file/images/avatar.png" />
          </div>
          <SearchMessage />
        </Header>
        <ContainerMessage>
          <MessageList messageList={this.state.testUser} />
        </ContainerMessage>
      </ContainerMain>
    );
  }
}

export default Sidebar;

CHILD COMPONENT:

import React from "react";
import PropTypes from "prop-types";

// STYLES
import {
  ContainerMain,
  ContainerUserMessage,
  ContainerInformation,
  UserAvatar,
  Username,
  LastMessage,
  LastMessageTime,
  AmountOfUnreadMessage
} from "./styles";

const MessageList = ({ messageList }) => {
  return messageList.map(props => (
    <ContainerMain key={props.name}>
      <UserAvatar src={props.avatar} />
      <ContainerUserMessage>
        <Username>{props.name}</Username>
        <LastMessage>{props.message.lastMessage}</LastMessage>
      </ContainerUserMessage>
      <ContainerInformation>
        <LastMessageTime>{props.message.lastMessageTime}</LastMessageTime>
        <AmountOfUnreadMessage>
          {props.message.amountOfUnreadMessage}
        </AmountOfUnreadMessage>
      </ContainerInformation>
    </ContainerMain>
  ));
};

MessageList.propTypes = {
  messageList: PropTypes.arrayOf(
    PropTypes.shape({
      lastMessage: PropTypes.string.isRequired,
      lastMessageTime: PropTypes.string.isRequired,
      amountOfUnreadMessage: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
};

export default MessageList;

Clarity · Accepted Answer · 2019-08-08 16:38:55Z

1

Looks like you're missing one level in your props, lastMessage, lastMessageTime and amountOfUnreadMessage are part of message and you define them on messageList.

answered Aug 8, 2019 at 16:38

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user11472365 Over a year ago

And what should be done? Because in the console all index comes correctly.

Collectives™ on Stack Overflow

How to validate an array of objects correctly?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related