Failed prop type: The prop `children` is marked as required in `e`, but its value is `null`

Sam

In my React app, I'm getting the following error but it doesn't tell me where it's happening. Any idea how I can pinpoint its location? The only place I have this.props.children doesn't seem to make any sense for this error.

enter image description here

UPDATE: Here's the Timeline component.

import React, { PropTypes } from 'react';
import PerfectScrollBar from 'react-perfect-scrollbar';

// Components
import TimelineEntry from './timelineEntry';

// Defaults
import { AvatarUrl } from '../../../../enum/defaults';

const Timeline = ({ member, conversationId, messages, activeMessageId, handleClickMessageSelected }) => {

    return (
        <div className=" height-100 padding-top-70">

            <div className="padding-15" style={{ position: 'absolute', top: '0', left: '0' }}>

                {typeof conversationId !== "undefined" && conversationId !== ""
                    ? <div className="timeline-item-msg" id="msc-newConversationMessage">

                        <img src={member.avatar ? member.avatar.smallAvatarUrl : AvatarUrl.avatar} className="tim-image" />
                        <div className="tim-msg">
                            <div className="tim-msg-body cursor-pointer border-radius">
                                New Message
                            </div>
                        </div>
                      </div>
                    : null
                }
            </div>

            <div className="height-100 position-relative padding-15">

                <PerfectScrollBar>
                    {
                        messages.length > 0
                            ? messages.map(item => <TimelineEntry key={item.id} entry={item} activeMessageId={activeMessageId} handleClickMessageSelected={handleClickMessageSelected} />)
                            : null
                    }
                </PerfectScrollBar>

            </div>
        </div>
    );
}

Timeline.PropTypes = {

    member: PropTypes.object.isRequired,
    conversationId: PropTypes.string.isRequired,
    messages: PropTypes.array.isRequired,
    activeMessageId: PropTypes.string.isRequired,
    handleClickMessageSelected: PropTypes.func.isRequired
};

export default Timeline;

And this is the TimelineEntry component:

import React, { PropTypes } from 'react';

// Defaults
import { AvatarUrl } from '../../../../enum/defaults';

// Utils
import { shortenTextToMaxCharacters } from '../../../../utils/string/stringUtils';

const TimelineEntry = ({ entry, activeMessageId, handleClickMessageSelected }) => {

    let wrapperClass = 'timeline-item-msg';
    if (entry.userFlag != 0)
        wrapperClass += ' flag-' + entry.userFlag;

    if (entry.id === activeMessageId)
        wrapperClass += ' active';

    return (
        <div className={wrapperClass} id={'mst-' + entry.id} onClick={e => handleClickMessageSelected(entry.id)}>

            <img src={entry.sender.avatarUrl ? entry.sender.avatarUrl : AvatarUrl.avatar} className="tim-image" />

            <div className="tim-msg">

                <div className="tim-msg-header">

                    {entry.sender.fullName} <br /><span className="opacity-6">{entry.messageTimeStamp.weekDay}  {entry.messageTimeStamp.date} <i className="margin-right-40">{entry.messageTimeStamp.time}</i></span>

                </div>

                <div className="tim-msg-body cursor-pointer">

                    {shortenTextToMaxCharacters(entry.body.trim(), 75)}

                </div>

            </div>

        </div>
    );
}

TimelineEntry.PropTypes = {

    entry: PropTypes.object.isRequired,
    activeMessageId: PropTypes.string.isRequired,
    handleClickMessageSelected: PropTypes.func.isRequired
};

export default TimelineEntry;
palsrealm

The PerfectScrollBar component that you are using in your Timeline component has a propType children: PropTypes.node.isRequired. (Code at https://github.com/goldenyz/react-perfect-scrollbar/blob/master/src/scrollbar.js)

In the Timeline component, when messages.length is 0, you are rendering null; which is causing no children to render for PerfectScrollBar, which in turn is giving the propType warning.

The workaround for this would be to render an empty div, <div></div> instead of null so that the propTypes of the PerfectScrollBar are satisfied.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

The prop `history` is marked as required in `Router`, but its value is `undefined`. in Router

Failed prop type: The prop todos[0].id is marked as required in TodoList, but its value is undefined

Warning: Failed prop type: The prop `store` is marked as required in `Provider`, but its value is `undefined`. in Provider

Failed prop type: The prop `userSignUpRequest` is marked as required in `Login`, but its value is `undefined`

Prop is marked as required in component, but its value is `undefined`

React-native, maps,The prop 'region.latitude' is marked as required in 'MapView' but it's value is null

The prop `children` is marked as required in `Button`, but its value is `undefined`

React-redux error "The prop `store` is marked as required in `Root`, but its value is `undefined"

reactjs Delete Operation Warning: Failed prop type: The prop `role` is marked as required in `ManageRolePage`, but its value is `null`

ReactJS Failed Prop Type With 'undefined' Value

Warning: Failed prop type: The prop `todos[0].title` is marked as required in `TodoList`, but its value is `undefined`

Failed prop type The prop is marked as required but its value is `undefined`

Warning: Failed prop type: The prop open is marked as required in Snackbar, but its value is undefined

The prop `classes` is marked as required in `FullWidthGrid`, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in `Mutation`, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined`

Failed prop type: The prop `children` is marked as required in` Sidebar`, but its value is `undefined`

Failed prop type: The prop `options` is marked as required in `signupCheckBoxes`, but its value is `undefined`

Failed prop type: The prop `auth` is marked as required in `Navbar`, but its value is `undefined`

React-Native this prop randomNumberCount is marked as required in Game ,but its value undefined

React - Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

Failed prop type: Invalid prop 'value'

React Native: Failed prop type: the prop businessPhoneNumberChanged is marked as required

Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`. MainImage

Failed prop type: Invalid prop `children` of type `array` supplied to `GlobalState`

How to fix this issue “Warning: Failed prop type: The prop `title` is marked as required in `Tab`, but its value is `undefined`.”

Warning: Failed prop type: The prop `createCourse` is marked as required in `CoursesPage`, but its value is `undefined`

Failed prop type: Invalid prop `value` of type `number`

The prop `checked` is marked as required in `ToggleSwitch`, but its value is `undefined`

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  3. 3

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  4. 4

    pump.io port in URL

  5. 5

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    Do Idle Snowflake Connections Use Cloud Services Credits?

  9. 9

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

  10. 10

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  11. 11

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  12. 12

    Generate random UUIDv4 with Elm

  13. 13

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  14. 14

    Is it possible to Redo commits removed by GitHub Desktop's Undo on a Mac?

  15. 15

    flutter: dropdown item programmatically unselect problem

  16. 16

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  17. 17

    EXCEL: Find sum of values in one column with criteria from other column

  18. 18

    Pandas - check if dataframe has negative value in any column

  19. 19

    How to use merge windows unallocated space into Ubuntu using GParted?

  20. 20

    Make a B+ Tree concurrent thread safe

  21. 21

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

HotTag

Archive