CODEWITHSUNDEEP
javascriptreactjsreact-proptypes
TFdev
TFdev

Reputation: 11

React prop-type validation with currying functions

I'm relatively new to React and have come across a problem where I am unable to validate the props on a component that is returned from a curried function.

I have tried validating prop-types on both "List" and "Wrapped-Component" but I am still not having any success. How would I go about validating the "data" prop in this specific instance? 

import React from "react";
import PropTypes from "prop-types";

const styles = {
  listStyles: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    listStyle: "none",
  },
};

const List = WrappedComponent => ({ data }) => (
  <ul style={styles.listStyles}>
    {data &&
      data.map(item => (
        <div>
          <WrappedComponent {...item} />
        </div>
      ))}
  </ul>
);

List.propTypes = {
  data: PropTypes.array.isRequired,
};

export default List;

Upvotes: 0

Views: 576

Answers (1)

azium
azium

Reputation: 20614

You're adding propTypes to the outer function not the component itself.

const makeList = WrappedComponent => {
  const List = ({ data }) => (
    <ul style={styles.listStyles}>
      {data &&
        data.map(item => (
          <div>
            <WrappedComponent {...item} />
          </div>
        ))}
    </ul>
  );

  List.propTypes = {
    data: PropTypes.array.isRequired,
  };

  return List
}

Upvotes: 1

Related Questions