ReactJS Failed Prop Type With 'undefined' Value

Question

I've looked at other similar questions but can't seem to find an answer...

I'm getting error:

Warning: Failed prop type: The prop height is marked as required in AudioPlayer, but its value is undefined.

When trying the following code:

import React, { Component } from "react";
import { Row, Col } from "react-bootstrap";
import Audio from "react-audioplayer";
import "./../../Assets/Css/AudioPlayer.css";
import PropTypes from "prop-types";

export default class AudioPlayer extends Component {
    render(props) {
        const playlist = this.props.playlist;

        const AudioStyles = {
            width: "99%",
            margin: "1% 0"
        };

        const AudioProps = {
            height: 600,
            style: AudioStyles,
            playlist: playlist,
            fullPlayer: true
        };

        return (
            <Row>
                <Col xs={12}>
                    <Audio {...AudioProps} />
                </Col>
            </Row>
        );
    }
}

AudioPlayer.propTypes = {
    height: PropTypes.number.isRequired
};

The code still functions as expected but gives the error mentioned above.

Should I be checking prop types differently?

You do not need AudioPlayer.propTypes = { height: PropTypes.number.isRequired };. it is needed in Audio component. — Ved
– Ved, Commented Sep 9, 2017 at 6:48

Ved · Accepted Answer · 2017-09-09 06:50:46Z

2

From what I see in your question description, uou have no dependency of prop height in the AudioPlayer component. You would rather want it in the Audio Component and hence you need to specify Proptype for the Audio component

so In the Audio component file add and remove from AudioPlayer component file.

Audio.propTypes = {
    height: PropTypes.number.isRequired
};

edited Sep 9, 2017 at 6:50

Ved

12.1k5 gold badges46 silver badges61 bronze badges

answered Sep 9, 2017 at 6:48

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

StudioTime Over a year ago

Argh - thanks, too much staring - will accept when I can, thanks!

Collectives™ on Stack Overflow

ReactJS Failed Prop Type With 'undefined' Value

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