React - prop-types is marked as required

Joris

I'm having an error when I'm using propTypes and conditional rendering children.

The error : Warning: Failed prop type: The prop 'rate' is marked as required in 'Rate', but its value is 'undefined'

// index.js
import React, { Component } from "react";
import { render } from "react-dom";
import Rate from "./components/Rate";
import Card from "./components/Card";

class App extends Component {
  state = {
    loading: true
  };

  componentDidMount() {
    setTimeout(() => this.setState({ loading: false, rate: 5 }), 5000);
  }

  render() {
    return (
      <Card loading={this.state.loading}>
        <Rate rate={this.state.rate} />
      </Card>
    );
  }
}

render(<App />, document.getElementById("root"));

// rate.js
import React from "react";
import PropTypes from "prop-types";

const Rate = ({ rate }) => (
  <div>
    <span>{rate}/10</span>
  </div>
);

Rate.propTypes = {
  rate: PropTypes.number.isRequired
};

export default Rate;

I have reproduced my error here : https://codesandbox.io/embed/qvx8q78ypw

I want to render children element only if loading is set to false.
EDIT : I don't understand why I get this error on Rate component until it is rendered
I don't understand why I get this error.

Thanks for help

devserkan

You can use a default prop value for the time being:

Rate.defaultProps = {
  rate: 0
};

You are not rendering Card conditionally as @Cody Moniz told in the answer. You are always rendering it. Probably in your Card component you are hiding or showing something depends on the loading prop that you passed to it. Do not bother like that, just use conditional rendering properly and clean up your Card component a little bit maybe.

render() {
    return !this.state.loading && (
      <Card>
        <Rate rate={this.state.rate} />
      </Card>
    );
}

Here, if React gets null or false it renders nothing. So, when your loading state is false you render nothing, after it changes to true then the second part evaluated and renders your component. Second part is not evaluated until the first one is true with logical && operator. This is a nice and clean way to do conditional rendering especially you want to show nothing in the first condition.

If you want to show something about Card (means render it) but only render Rate component conditionally, you can apply this logic in your Card component with loading prop that your Card component gets.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

At least one required prop in React

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

Checking prop types in React

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 Prop Types Different Required Props Depending on Flag

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`

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

The prop `store.subscribe` is marked as required

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

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

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`

React interdependent prop types

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`

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

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`

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