CODEWITHSUNDEEP
javascriptreactjsjsx
user1486133
user1486133

Reputation: 1487

Set a variable to true if all the props are defined

What is the simplest way to set a variable to true if all the required props for the rendered component are defined?

E.g:

  renderThing() {
    const {
      bookState,
      totalPrice,
      agentWebPriceDelta,
      numberOfChargeablePassengers,
    } = this.props;

      const requiredProps = bookState !== 'undefined' && totalPrice !== 'undefined' && agentWebPriceDelta !== 'undefined' && numberOfChargeablePassengers !== 'undefined';

      return requiredProps && (
          <ComponentToBeRendered
            ...
          />
        );
    }
  }

This is to stop getting errors like:

Required prop totalPrice was not specified in ComponentToBeRendered.'

Upvotes: 0

Views: 103

Answers (4)

markm247
markm247

Reputation: 97

I would recommend using React's propTypes to enforce the required fields. For your example, after the ComponentToBeRendered class definition, you would include:

ComponentToBeRendered.propTypes = {
  bookState: React.PropTypes.isRequired,
  totalPrice: React.PropTypes.isRequired,
  agentWebPriceDelta: React.PropTypes.isRequired,
  numberofChargeablePassengers: React.PropTypes.isRequired
};

Using propTypes on your component will enforce the field requirement. You can also use propTypes to ensure the property type is correct.

Upvotes: 0

Apfelbox
Apfelbox

Reputation: 367

As you just want to get rid of the warning I recommend to remove the "isRequired" from your properties. e.g:

ES6

YourComponent.propTypes = {
  //instead of this
  bookState: React.PropTypes.string.isRequired,
  //try this
  bookState: React.PropTypes.string,
};

< ES6

propTypes: {
  //instead of this
  bookState: React.PropTypes.string.isRequired,
  //try this
  bookState: React.PropTypes.string,
},

If you specify a property as required in react you will always receive this error when a required property is missing. If you also want to render a Component without all properties, you should set defaultProps for the ones that could be missing (and are not required). So always think about when it is useful to set a property required and when not.

PS.: I think those errors/warnings only show in development mode, but I'm not 100% sure about that.

Upvotes: 1

J&#233;r&#233;mie L
J&#233;r&#233;mie L

Reputation: 775

Note: remove the quotes around undefined:

const requiredProps = bookState !== undefined && totalPrice !== undefined && agentWebPriceDelta !== undefined && numberOfChargeablePassengers !== undefined;

You can also use Array.prototype.reduce like this (not sure if it's more readable):

const requiredProps = [
  bookState,
  totalPrice,
  agentWebPriceDelta,
  numberOfChargeablePassengers
].reduce((prev, value) => prev && value !== undefined, true);

Upvotes: 3

Vladu Ionut
Vladu Ionut

Reputation: 8193

Undefined is a primitive in javascript.In your code you compare the values with the string 'undefined'

typeof bookState !== 'undefined' or bookState !== undefined

  const requiredProps = bookState !== undefined && totalPrice !== undefined && agentWebPriceDelta !== undefined && numberOfChargeablePassengers !== undefined;

Upvotes: 0

Related Questions