CODEWITHSUNDEEP
reactjsvalidationtypes
StudioTime
StudioTime

Reputation: 23989

ReactJS Failed Prop Type With 'undefined' Value

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?

Upvotes: 2

Views: 5591

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

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
};

Upvotes: 2

Related Questions