How to use prop-types-exact - 10 common examples

...sloppy(ComponentToWrap.propTypes),
        };

        passedProps.forEach((propName) => {
          delete copiedProps[propName];
        });

        const newPropTypes = {
          ...copiedProps,
          ...(NewComponent.propTypes && sloppy(NewComponent.propTypes)),
        };

        if (allowExtraProps) {
          NewComponent.propTypes = newPropTypes;
        } else {
          NewComponent.propTypes = exact(newPropTypes);
        }
      } else if (!allowExtraProps) {
        // Get "sloppy" propTypes before getting "exact" prop types in case
        // the original prop types were already "exact"
        NewComponent.propTypes = exact(sloppy(NewComponent.propTypes));
      }

      return hoistNonReactStatics(NewComponent, ComponentToWrap);
    };
  }

NewComponent.WrappedComponent = ComponentToWrap;
      NewComponent.displayName = `${hocName}(${getComponentName(ComponentToWrap)})`;

      if (ComponentToWrap.propTypes) {
        const copiedProps = {
          ...sloppy(ComponentToWrap.propTypes),
        };

        passedProps.forEach((propName) => {
          delete copiedProps[propName];
        });

        const newPropTypes = {
          ...copiedProps,
          ...(NewComponent.propTypes && sloppy(NewComponent.propTypes)),
        };

        if (allowExtraProps) {
          NewComponent.propTypes = newPropTypes;
        } else {
          NewComponent.propTypes = exact(newPropTypes);
        }
      } else if (!allowExtraProps) {
        // Get "sloppy" propTypes before getting "exact" prop types in case
        // the original prop types were already "exact"
        NewComponent.propTypes = exact(sloppy(NewComponent.propTypes));
      }

      return hoistNonReactStatics(NewComponent, ComponentToWrap);
    };
  }

});

        const newPropTypes = {
          ...copiedProps,
          ...(NewComponent.propTypes && sloppy(NewComponent.propTypes)),
        };

        if (allowExtraProps) {
          NewComponent.propTypes = newPropTypes;
        } else {
          NewComponent.propTypes = exact(newPropTypes);
        }
      } else if (!allowExtraProps) {
        // Get "sloppy" propTypes before getting "exact" prop types in case
        // the original prop types were already "exact"
        NewComponent.propTypes = exact(sloppy(NewComponent.propTypes));
      }

      return hoistNonReactStatics(NewComponent, ComponentToWrap);
    };
  }

* The children stay within it's parent DOM hierarchy.
   */
  disablePortal: PropTypes.bool,
  /**
   * Callback fired once the children has been mounted into the `container`.
   */
  onRendered: PropTypes.func
};

Portal.defaultProps = {
  disablePortal: false,
  container: null,
  onRendered: () => {}
};

Portal.propTypes = exactProp(Portal.propTypes);

export default Portal;

{pairingBoardWithPeople.people.map((person, idx) => {
                                return <span>{person.name}
                                    <span>+</span>
                                </span>
                            })}
                        
                    })}
                

                <div>
            </div>
        )
    }
}

PairingHistoryRecord.propTypes = exact({
    pairingTime: PropTypes.string.isRequired,
    pairingBoardsWithPeople: PropTypes.arrayOf(PropTypes.object).isRequired
});

export default PairingHistoryRecord;

}

    renamePairingBoard(name) {
        this.props.renamePairingBoard(this.props.id, name, this.disableEditMode.bind(this))
    }

    deletePairingBoard() {
        this.props.deletePairingBoard(this.props.id)
    }

    openNewRoleModal () {
        this.props.setNewRoleModalOpen(this.props.id, true)
    }
}

PairingBoard.propTypes = exact({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    exempt: PropTypes.bool.isRequired,
    people: PropTypes.arrayOf(PropTypes.object).isRequired,
    roles: PropTypes.arrayOf(PropTypes.object).isRequired,
    editMode: PropTypes.bool.isRequired,
    editErrorMessage: PropTypes.string,
    isOver: PropTypes.bool.isRequired,
    renamePairingBoard: PropTypes.func.isRequired,
    deletePairingBoard: PropTypes.func.isRequired,
    moveRole: PropTypes.func.isRequired,
    deleteRole: PropTypes.func.isRequired,
    setPairingBoardEditMode: PropTypes.func.isRequired,
    setNewRoleModalOpen: PropTypes.func.isRequired,
    connectDropTarget: PropTypes.func.isRequired
})

const {item, itemType, isDragging, currentOffset} = this.props

        if(!isDragging) return null

        return (
            <div>
                <div style="{getTransformStyle(currentOffset)}">
                    {itemType === dragTypes.Person &amp;&amp; renderPerson(item.name)}
                    {itemType === dragTypes.Role &amp;&amp; renderRole(item.name)}
                </div>
            </div>
        )
    }
}

CustomDragLayer.propTypes = exact({
    item: PropTypes.object,
    itemType: PropTypes.string,
    isDragging: PropTypes.bool.isRequired,
    currentOffset: PropTypes.shape({
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired
    })
})

const dragCollect = (monitor) =&gt; {
    return {
        item: monitor.getItem(),
        itemType: monitor.getItemType(),
        isDragging: monitor.isDragging(),
        currentOffset: monitor.getSourceClientOffset()
    }

<div>
                    <h1>{this.props.projectName}</h1>
                    <form method="POST" action="/api/login/project">
                        <input value="{this.props.projectName}/" name="username" type="hidden">
                        <input placeholder="Password" name="password" type="password">
                        <input value="{this.props.csrfToken}/" name="{this.props.csrfParameterName}" type="hidden">
                        <input value="Login" type="submit">
                    </form>
                
                <footer>
            </footer></div>
        )
    }
}

Login.propTypes = exact({
    projectName: PropTypes.string.isRequired,
    csrfParameterName: PropTypes.string.isRequired,
    csrfToken: PropTypes.string.isRequired
})

export default Login

class TrashBin extends React.Component {
    render() {
        const {isOver, connectDropTarget} = this.props

        const classes = classNames({
            'trash-bin': true,
            'drop-target': isOver
        })

        return connectDropTarget(
            <div>
        )
    }
}

TrashBin.propTypes = exact({
    isOver: PropTypes.bool.isRequired,
    connectDropTarget: PropTypes.func.isRequired
})

const dragSpec = {
    drop(props, monitor) {
        if(monitor.didDrop()) return

        return {
            type: dropTypes.TrashBin
        }
    }
}

const dragCollect = (connect, monitor) =&gt; {
    return {</div>

componentDidMount() {
        this.props.connectDragPreview(getEmptyImage())
    }

    render() {
        const {name, isDragging, connectDragSource} = this.props

        if(isDragging) return null

        return connectDragSource(
            renderPerson(name)
        )
    }
}

Person.propTypes = exact({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    isDragging: PropTypes.bool.isRequired,
    connectDragSource: PropTypes.func.isRequired,
    connectDragPreview: PropTypes.func.isRequired
})

const dragSpec = {
    beginDrag(props) {
        return {
            id: props.id,
            name: props.name
        }
    }
}