Breaking News: Grepper is joining You.com. Read the official announcement!

how to use prop-types to check object with dynamic keys

irasanchez answered on September 4, 2022 Popularity 1/10 Helpfulness 8/10

answer how to use prop-types to check object with dynamic keys

how to use prop-types to check object with dynamic keys

Comment

// irasanchez.com

const ComponentName = ({ arrayOfObjectsWithDynamicKeys }) => {
  return <div>Look below for PropTypes example</div>
}

/* if all of keys of the same types of values 
(e.g. every key leads to a string, every key leads to a number, etc.)
Note about this example: 
the array is required, the objects are not, 
if the objects are present, the string values are required */

ComponentName.propTypes = {
  arrayOfObjectsWithDynamicKeys: PropTypes.arrayOf(
    	PropType.objectOf(PropType.string.isRequired)
    ).isRequired
} 

// if the objects' keys lead to various data types
ComponentName.propTypes = {
  arrayOfObjectsWithDynamicKeys: function (props, propName, componentName) {
    // check that the prop is indeed an object
    // note: this will return true if the object is an array
    if (typeof props[propName] !== "object") {
      return new Error(
        `Invalid prop "${propName}" supplied to "${componentName}".\n\n
         Validation failed.\n\n
         Should be an object, but it's actually this type: ${typeof props[
           propName
         ]}.`
      );
    }

    // check the types of the prop's key-value pairs
    Object.keys(props[propName]).forEach((key) => {
      if (key === "THE KEY YOU WANT TO CHECK") {
        if (typeof props[propName][key] !== "THE TYPE YOU WANT TO CHECK FOR") {
          return new Error(
            `Invalid key "${key}" supplied to "${propName}".\n\n
             Validation failed.\n\n
             Should be an object, but it's actually this type: ${typeof props[
               propName
             ][key]}.`
          );
        }
      }
    });
  },
};

Popularity 1/10 Helpfulness 8/10 Language javascript

Source: reactjs.org

Tags: dynamic javascript object

Link to this answer
Share Copy Link

Contributed on Sep 04 2022

irasanchez

0 Answers Avg Quality 2/10

how to use prop-types to check object with dynamic keys

Contents

More Related Answers

how to use prop-types to check object with dynamic keys

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.