diff --git a/app/components/AssetTree/AssetNode/AssetNode.js b/app/components/AssetTree/AssetNode/AssetNode.js
index 21ff03f1..444179e3 100644
--- a/app/components/AssetTree/AssetNode/AssetNode.js
+++ b/app/components/AssetTree/AssetNode/AssetNode.js
@@ -71,16 +71,16 @@ const StyledLabel = styled.span`
 function AssetNode(props) {
   const {
     node,
-    root,
-    openNodes,
-    checkedNodes,
-    selectedAsset,
-    level,
-    checkboxes,
-    onToggle,
-    onRightClick,
-    onClick,
-    ancestorArchived,
+    root = false,
+    openNodes = [],
+    checkedNodes = [],
+    selectedAsset = null,
+    level = 0,
+    checkboxes = false,
+    onToggle = null,
+    onRightClick = null,
+    onClick = null,
+    ancestorArchived = false,
   } = props;
   const isOpen = root || openNodes.includes(node.uri);
   const isChecked = checkboxes && (root || checkedNodes.includes(node.uri));
@@ -185,18 +185,4 @@ AssetNode.propTypes = {
   ancestorArchived: PropTypes.bool,
 };
 
-AssetNode.defaultProps = {
-  root: false,
-  onToggle: null,
-  onRightClick: null,
-  onClick: null,
-  onCheck: null,
-  level: 0,
-  selectedAsset: null,
-  openNodes: [],
-  checkedNodes: [],
-  checkboxes: false,
-  ancestorArchived: false,
-};
-
 export default AssetNode;
diff --git a/app/components/AssetTree/AssetTree.js b/app/components/AssetTree/AssetTree.js
index e8fc5135..dddfad9a 100644
--- a/app/components/AssetTree/AssetTree.js
+++ b/app/components/AssetTree/AssetTree.js
@@ -12,25 +12,39 @@ import styles from './AssetTree.css';
 class AssetTree extends Component {
   constructor(props) {
     super(props);
+
+    const {
+      selectedAsset = null,
+      checkboxes = false,
+      onCheckAsset = null,
+      rootSelectable = true
+    } = props;
+
     this.state = { expandedNodes: [], checkedNodes: [] };
   }
 
   handleClick = (node) => {
+    const {
+      assets,
+      onSelectAsset,
+      rootSelectable = true
+    } = this.props;
+
     // Determine if this is selectable.  We don't consider a selection if:
     // 1. The asset collection is null
     // 2. The selected node is null
     // 3. Root selection is disabled and this is the root item
     //
     // To handle unselectable items, we trigger to clear the active selection.
-    if (this.props.assets === null || node === null) {
-      this.props.onSelectAsset(null);
+    if (assets === null || node === null) {
+      onSelectAsset(null);
       return;
-    } else if (!this.props.rootSelectable && (node.uri === this.props.assets.uri)) {
-      this.props.onSelectAsset(null);
+    } else if (!rootSelectable && (node.uri === assets.uri)) {
+      onSelectAsset(null);
       return;
     }
 
-    this.props.onSelectAsset(node);
+    onSelectAsset(node);
   };
 
   onToggle = (node) => {
@@ -64,6 +78,8 @@ class AssetTree extends Component {
   };
 
   setExpandAll = (expand) => {
+    const { assets } = this.props;
+
     this.setState(() => {
       const expandedNodes = [];
       // If we're collapsing, we just set this to an empty array.  Easy!
@@ -72,15 +88,17 @@ class AssetTree extends Component {
       }
 
       // If we're expanding, we need to recursively add every folder URI.
-      expandedNodes.push(this.props.assets.uri);
-      if (this.props.assets.children) {
-        this.props.assets.children.forEach((c) => this.setNodeExpanded(c, expandedNodes));
+      expandedNodes.push(assets.uri);
+      if (assets.children) {
+        assets.children.forEach((c) => this.setNodeExpanded(c, expandedNodes));
       }
       return { expandedNodes };
     });
   };
 
   handleCheck = (node, value) => {
+    const { onCheckAsset = null } = this.props;
+
     this.setState((prevState) => {
       const checkedNodes = [...prevState.checkedNodes];
       const index = checkedNodes.indexOf(node.uri);
@@ -92,22 +110,30 @@ class AssetTree extends Component {
       return { checkedNodes };
     });
 
-    if (this.props.onCheckAsset) {
-      this.props.onCheckAsset(node, value);
+    if (onCheckAsset) {
+      onCheckAsset(node, value);
     }
   };
 
   render() {
-    const assetTree = !this.props.assets ? null : (
+    const {
+      assets,
+      selectedAsset = null,
+      checkboxes = false,
+    } = this.props;
+
+    const { expandedNodes, checkedNodes } = this.state;
+
+    const assetTree = !assets ? null : (
       <AssetNode
         onClick={this.handleClick}
         root
-        key={this.props.assets.uri}
-        node={this.props.assets}
-        openNodes={this.state.expandedNodes}
-        checkedNodes={this.state.checkedNodes}
-        selectedAsset={this.props.selectedAsset}
-        checkboxes={this.props.checkboxes}
+        key={assets.uri}
+        node={assets}
+        openNodes={expandedNodes}
+        checkedNodes={checkedNodes}
+        selectedAsset={selectedAsset}
+        checkboxes={checkboxes}
         onToggle={this.onToggle}
         onCheck={this.handleCheck}
       />
@@ -126,11 +152,4 @@ AssetTree.propTypes = {
   rootSelectable: PropTypes.bool
 };
 
-AssetTree.defaultProps = {
-  selectedAsset: null,
-  checkboxes: false,
-  onCheckAsset: null,
-  rootSelectable: true
-};
-
 export default AssetTree;
diff --git a/app/components/CloneDirectory/CloneDirectory.js b/app/components/CloneDirectory/CloneDirectory.js
index 0013eb44..22e4787d 100644
--- a/app/components/CloneDirectory/CloneDirectory.js
+++ b/app/components/CloneDirectory/CloneDirectory.js
@@ -62,20 +62,30 @@ class CloneDirectory extends Component {
   };
 
   render() {
+    const {
+      sourceDirectory,
+      targetBaseDirectory,
+      projectName,
+      onSourceDirectoryChanged,
+      onTargetBaseDirectoryChanged,
+      onProjectNameChanged,
+      isValidDirectory = false,
+    } = this.props;
+
     let validation = null;
     if (this.state.validationErrorMessage) {
       validation = <Error style={{ marginTop: '15px' }}>{this.state.validationErrorMessage}</Error>;
     }
 
-    const targetDirectory = this.props.targetBaseDirectory && this.props.projectName
-      ? `${this.props.targetBaseDirectory}/${this.props.projectName}`
+    const targetDirectory = targetBaseDirectory && projectName
+      ? `${targetBaseDirectory}/${projectName}`
       : '';
 
     return (
       <div className={styles.container} data-tid="container">
         <fieldset>
           <legend>Source project directory to clone:</legend>
-          <input readOnly type="text" value={this.props.sourceDirectory} />
+          <input readOnly type="text" value={sourceDirectory} />
           <Button
             className={styles.browse}
             onClick={this.handleBrowseSourceDirectory}
@@ -87,7 +97,7 @@ class CloneDirectory extends Component {
 
         <fieldset>
           <legend>Target base directory:</legend>
-          <input readOnly type="text" value={this.props.targetBaseDirectory} />
+          <input readOnly type="text" value={targetBaseDirectory} />
           <Button
             className={styles.browse}
             onClick={this.handleBrowseTargetBaseDirectory}
@@ -101,12 +111,12 @@ class CloneDirectory extends Component {
           <legend>New project name:</legend>
           <input
             type="text"
-            value={this.props.projectName}
+            value={projectName}
             onChange={this.handleProjectNameChange}
           />
         </fieldset>
 
-        {targetDirectory && this.props.isValidDirectory && (
+        {targetDirectory && isValidDirectory && (
           <div className={styles.targetDirectoryPreview}>
             <p>New project will be created at:</p>
             <code>{targetDirectory}</code>
@@ -127,10 +137,7 @@ CloneDirectory.propTypes = {
   onSourceDirectoryChanged: PropTypes.func.isRequired,
   onTargetBaseDirectoryChanged: PropTypes.func.isRequired,
   onProjectNameChanged: PropTypes.func.isRequired,
-  isValidDirectory: PropTypes.bool, 
-};
-CloneDirectory.defaultProps = {
-  isValidDirectory: false,  // Default to false
+  isValidDirectory: PropTypes.bool,
 };
 
 export default CloneDirectory;
diff --git a/app/components/EditableLabel/EditableLabel.js b/app/components/EditableLabel/EditableLabel.js
index 31a9b2b4..018cead3 100644
--- a/app/components/EditableLabel/EditableLabel.js
+++ b/app/components/EditableLabel/EditableLabel.js
@@ -44,10 +44,12 @@ export default class EditableLabel extends React.Component {
   };
 
   handleFocus = () => {
-    if (this.state.isEditing && typeof this.props.onFocusOut === 'function') {
-      this.props.onFocusOut(this.state.text);
-    } else if (typeof this.props.onFocus === 'function') {
-      this.props.onFocus(this.state.text);
+    const { onFocusOut, onFocus, emptyEdit = false } = this.props;
+
+    if (this.state.isEditing && typeof onFocusOut === 'function') {
+      onFocusOut(this.state.text);
+    } else if (typeof onFocus === 'function') {
+      onFocus(this.state.text);
     }
 
     if (this.isTextValueValid()) {
@@ -57,7 +59,7 @@ export default class EditableLabel extends React.Component {
       }));
     } else if (this.state.isEditing) {
       this.setState({
-        isEditing: this.props.emptyEdit || false,
+        isEditing: emptyEdit,
       });
     } else {
       this.setState((prevState) => ({
@@ -68,8 +70,9 @@ export default class EditableLabel extends React.Component {
   };
 
   handleSave = () => {
-    if (typeof this.props.onFocusOut === 'function') {
-      this.props.onFocusOut(this.state.text);
+    const { onFocusOut } = this.props;
+    if (typeof onFocusOut === 'function') {
+      onFocusOut(this.state.text);
     }
     this.setState({ isEditing: false });
   };
@@ -89,7 +92,8 @@ export default class EditableLabel extends React.Component {
 
   handleKeyDown = (e) => {
     // We only allow enter-completion when this is a single line editor.
-    if (e.keyCode === ENTER_KEY_CODE && !this.props.multiline) {
+    const { multiline = false } = this.props;
+    if (e.keyCode === ENTER_KEY_CODE && !multiline) {
       this.handleEnterKey();
     }
   };
@@ -99,31 +103,51 @@ export default class EditableLabel extends React.Component {
   };
 
   render() {
+    const {
+      multiline = false,
+      containerClassName = null,
+      inputClassName = null,
+      inputWidth = null,
+      inputHeight = null,
+      inputFontSize = null,
+      inputFontWeight = null,
+      inputBorderWidth = null,
+      inputMaxLength = 524288,
+      inputPlaceHolder = null,
+      inputTabIndex = 0,
+      showSaveCancel = false,
+      labelContainerClassName = null,
+      labelClassName = null,
+      labelFontSize = null,
+      labelFontWeight = null,
+      labelPlaceHolder = null,
+    } = this.props;
+
     if (this.state.isEditing) {
-      if (this.props.multiline) {
+      if (multiline) {
         return (
-          <div className={this.props.containerClassName}>
+          <div className={containerClassName}>
             <textarea
               autoFocus
-              className={this.props.inputClassName}
+              className={inputClassName}
               ref={(input) => {
                 this.textInput = input;
               }}
               value={this.state.text}
               onChange={this.handleChange}
-              onBlur={this.props.showSaveCancel ? this.handleSave : this.handleFocus}
+              onBlur={showSaveCancel ? this.handleSave : this.handleFocus}
               style={{
-                width: this.props.inputWidth,
-                height: this.props.inputHeight,
-                fontSize: this.props.inputFontSize,
-                fontWeight: this.props.inputFontWeight,
-                borderWidth: this.props.inputBorderWidth,
+                width: inputWidth,
+                height: inputHeight,
+                fontSize: inputFontSize,
+                fontWeight: inputFontWeight,
+                borderWidth: inputBorderWidth,
               }}
-              maxLength={this.props.inputMaxLength}
-              placeholder={this.props.inputPlaceHolder}
-              tabIndex={this.props.inputTabIndex}
+              maxLength={inputMaxLength}
+              placeholder={inputPlaceHolder}
+              tabIndex={inputTabIndex}
             />
-            {this.props.showSaveCancel && (
+            {showSaveCancel && (
               <div style={{ marginTop: '4px', display: 'flex', gap: '6px' }}>
                 <button
                   type="button"
@@ -148,11 +172,11 @@ export default class EditableLabel extends React.Component {
       }
 
       return (
-        <div className={this.props.containerClassName}>
+        <div className={containerClassName}>
           <input
             autoFocus
             type="text"
-            className={this.props.inputClassName}
+            className={inputClassName}
             ref={(input) => {
               this.textInput = input;
             }}
@@ -161,15 +185,15 @@ export default class EditableLabel extends React.Component {
             onBlur={this.handleFocus}
             onKeyDown={this.handleKeyDown}
             style={{
-              width: this.props.inputWidth,
-              height: this.props.inputHeight,
-              fontSize: this.props.inputFontSize,
-              fontWeight: this.props.inputFontWeight,
-              borderWidth: this.props.inputBorderWidth,
+              width: inputWidth,
+              height: inputHeight,
+              fontSize: inputFontSize,
+              fontWeight: inputFontWeight,
+              borderWidth: inputBorderWidth,
             }}
-            maxLength={this.props.inputMaxLength}
-            placeholder={this.props.inputPlaceHolder}
-            tabIndex={this.props.inputTabIndex}
+            maxLength={inputMaxLength}
+            placeholder={inputPlaceHolder}
+            tabIndex={inputTabIndex}
           />
         </div>
       );
@@ -177,18 +201,18 @@ export default class EditableLabel extends React.Component {
 
     const labelText = this.isTextValueValid()
       ? this.state.text
-      : this.props.labelPlaceHolder || DEFAULT_LABEL_PLACEHOLDER;
+      : labelPlaceHolder || DEFAULT_LABEL_PLACEHOLDER;
     return (
       <div
-        className={`${this.props.containerClassName || ''} ${this.props.labelContainerClassName || ''}`.trim()}
+        className={`${containerClassName || ''} ${labelContainerClassName || ''}`.trim()}
         onClick={this.handleFocus}
         style={{ cursor: 'text' }}
       >
         <label
-          className={this.props.labelClassName}
+          className={labelClassName}
           style={{
-            fontSize: this.props.labelFontSize,
-            fontWeight: this.props.labelFontWeight,
+            fontSize: labelFontSize,
+            fontWeight: labelFontWeight,
           }}
         >
           {labelText}
@@ -227,34 +251,6 @@ EditableLabel.propTypes = {
   onFocusOut: PropTypes.func,
 };
 
-EditableLabel.defaultProps = {
-  isEditing: false,
-  emptyEdit: false,
-  multiline: false,
-
-  labelClassName: null,
-  labelContainerClassName: null,
-  labelFontSize: null,
-  labelFontWeight: null,
-  labelPlaceHolder: null,
-
-  showSaveCancel: false,
-  containerClassName: null,
-
-  inputMaxLength: 524288,
-  inputPlaceHolder: null,
-  inputTabIndex: 0,
-  inputWidth: null,
-  inputHeight: null,
-  inputFontSize: null,
-  inputFontWeight: null,
-  inputClassName: null,
-  inputBorderWidth: null,
-
-  onFocus: null,
-  onFocusOut: null,
-};
-
 /*
 https://github.com/bfischer/react-inline-editing/blob/master/LICENSE
 
diff --git a/app/components/Filter/FilterItem/FilterItem.js b/app/components/Filter/FilterItem/FilterItem.js
index 63479def..d9cc2865 100644
--- a/app/components/Filter/FilterItem/FilterItem.js
+++ b/app/components/Filter/FilterItem/FilterItem.js
@@ -4,7 +4,7 @@ import styles from './FilterItem.css';
 import WorkflowUtil from '../../../utils/workflow';
 
 function filterItem(props) {
-  const { disabled, checked, onChecked, category, filter, label } = props;
+  const { disabled = false, checked, onChecked = null, category, filter, label } = props;
 
   const handleChange = () => {
     if (onChecked) {
@@ -37,9 +37,4 @@ filterItem.propTypes = {
   label: PropTypes.string.isRequired,
 };
 
-filterItem.defaultProps = {
-  disabled: false,
-  onChecked: null,
-};
-
 export default filterItem;
diff --git a/app/components/NoteEditor/Note/Note.js b/app/components/NoteEditor/Note/Note.js
index 74908395..af4fa7c7 100644
--- a/app/components/NoteEditor/Note/Note.js
+++ b/app/components/NoteEditor/Note/Note.js
@@ -6,7 +6,7 @@ import EditableLabel from '../../EditableLabel/EditableLabel';
 import styles from './Note.css';
 
 function noteDetails(props) {
-  const { note, onEditingComplete, onDelete } = props;
+  const { note = null, onEditingComplete = null, onDelete = null } = props;
   const metadata = note ? (
     <div className={styles.metadata}>
       {note.author} @ {note.updated}
@@ -47,10 +47,4 @@ noteDetails.propTypes = {
   onDelete: PropTypes.func,
 };
 
-noteDetails.defaultProps = {
-  note: null,
-  onEditingComplete: null,
-  onDelete: null,
-};
-
 export default noteDetails;
diff --git a/app/components/People/People.js b/app/components/People/People.js
index 62f4f4a0..80dac91a 100644
--- a/app/components/People/People.js
+++ b/app/components/People/People.js
@@ -1,4 +1,3 @@
-
 import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaTh, FaThList } from 'react-icons/fa';
@@ -9,18 +8,16 @@ import PeopleTable from './PeopleTable/PeopleTable';
 import SettingsContext from '../../contexts/Settings';
 import styles from './People.css';
 
-function people(props) {
-  const {
-    project,
-    mode,
-    list,
-    onDelete,
-    onSave,
-    onAddedPersonNote,
-    onUpdatedPersonNote,
-    onDeletedPersonNote,
-  } = props;
-
+function people({
+  project = null,
+  mode,
+  list = [],
+  onDelete = null,
+  onSave = null,
+  onAddedPersonNote = null,
+  onUpdatedPersonNote = null,
+  onDeletedPersonNote = null,
+}) {
   // This key is part of a trick to get React to throw out and recreate the Create Project
   // dialog when we have disposed of it - either by creating a project or cancelling.  This
   // tracks a sequential number that, when changed, signals React that the dialog can be
@@ -166,14 +163,4 @@ people.propTypes = {
   onDeletedPersonNote: PropTypes.func,
 };
 
-people.defaultProps = {
-  project: null,
-  list: [],
-  onSave: null,
-  onDelete: null,
-  onAddedPersonNote: null,
-  onUpdatedPersonNote: null,
-  onDeletedPersonNote: null,
-};
-
 export default people;
diff --git a/app/components/People/PeopleCardList/PeopleCardList.js b/app/components/People/PeopleCardList/PeopleCardList.js
index 37123ed1..d2fc7cbd 100644
--- a/app/components/People/PeopleCardList/PeopleCardList.js
+++ b/app/components/People/PeopleCardList/PeopleCardList.js
@@ -7,12 +7,12 @@ import styles from './PeopleCardList.css';
 function peopleCardList(props) {
   const {
     mode,
-    list,
-    onEdit,
-    onDelete,
-    onAddedPersonNote,
-    onUpdatedPersonNote,
-    onDeletedPersonNote,
+    list = [],
+    onEdit = null,
+    onDelete = null,
+    onAddedPersonNote = null,
+    onUpdatedPersonNote = null,
+    onDeletedPersonNote = null,
   } = props;
 
   const deletePersonHandler = (person) => {
@@ -79,13 +79,4 @@ peopleCardList.propTypes = {
   onDeletedPersonNote: PropTypes.func,
 };
 
-peopleCardList.defaultProps = {
-  list: [],
-  onEdit: null,
-  onDelete: null,
-  onAddedPersonNote: null,
-  onUpdatedPersonNote: null,
-  onDeletedPersonNote: null,
-};
-
 export default peopleCardList;
diff --git a/app/components/People/PeopleTable/PeopleTable.js b/app/components/People/PeopleTable/PeopleTable.js
index d9d62cca..0795ad22 100644
--- a/app/components/People/PeopleTable/PeopleTable.js
+++ b/app/components/People/PeopleTable/PeopleTable.js
@@ -62,7 +62,7 @@ function FilterComponent({ filterText, onFilter, onClear }) {
 }
 
 function peopleTable(props) {
-  const { mode, list, onEdit, onDelete } = props;
+  const { mode, list = [], onEdit = null, onDelete = null } = props;
   const [filterText, setFilterText] = React.useState('');
   const [personToDelete, setPersonToDelete] = React.useState(null);
 
@@ -220,10 +220,4 @@ peopleTable.propTypes = {
   onDelete: PropTypes.func,
 };
 
-peopleTable.defaultProps = {
-  list: [],
-  onEdit: null,
-  onDelete: null,
-};
-
 export default peopleTable;
diff --git a/app/components/Person/Person.js b/app/components/Person/Person.js
index c54a4e60..a5996ae5 100644
--- a/app/components/Person/Person.js
+++ b/app/components/Person/Person.js
@@ -15,7 +15,17 @@ import NoteEditor from '../NoteEditor/NoteEditor';
 import GeneralUtil from '../../utils/general';
 import styles from './Person.css';
 
-function person(props) {
+function person({
+  id = '',
+  name = null,
+  affiliation = '',
+  roles = [],
+  notes = [],
+  onEditPerson = null,
+  onDeletePerson = null,
+  ...rest
+}) {
+  const props = { id, name, affiliation, roles, notes, onEditPerson, onDeletePerson, ...rest };
   const { mode } = props;
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
@@ -114,14 +124,4 @@ person.propTypes = {
   onDeletePerson: PropTypes.func,
 };
 
-person.defaultProps = {
-  id: '',
-  name: null,
-  affiliation: '',
-  roles: [],
-  notes: [],
-  onEditPerson: null,
-  onDeletePerson: null,
-};
-
 export default person;
diff --git a/app/components/Project/LinkedDescription/LinkedDescription.js b/app/components/Project/LinkedDescription/LinkedDescription.js
index 70172603..5c4dd143 100644
--- a/app/components/Project/LinkedDescription/LinkedDescription.js
+++ b/app/components/Project/LinkedDescription/LinkedDescription.js
@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import Error from '../../Error/Error';
 import styles from './LinkedDescription.css';
 
-function linkedDescription(props) {
+function linkedDescription({ projectPath = '', ...rest }) {
+  const props = { projectPath, ...rest };
   const [validationErrorMessage, setValidationErrorMessage] = useState(null);
   const [linkedUri, setLinkedUri] = useState(null);
 
@@ -59,8 +60,4 @@ linkedDescription.propTypes = {
   projectPath: PropTypes.string,
 };
 
-linkedDescription.defaultProps = {
-  projectPath: '',
-};
-
 export default linkedDescription;
diff --git a/app/components/Project/Project.js b/app/components/Project/Project.js
index 009fde60..39aff2f1 100644
--- a/app/components/Project/Project.js
+++ b/app/components/Project/Project.js
@@ -59,14 +59,15 @@ class Project extends Component<Props> {
   }
 
   aboutDetailsUpdateHandler = (descriptionText, descriptionUri, categories) => {
-    const project = { ...this.props.project, categories };
+    const { project, onUpdated } = this.props;
+    const updatedProject = { ...project, categories };
     // If the description URI is set, we will use that for the description content.  Otherwise
     // we will fall back to use the provided description text.
     if (descriptionUri) {
       // If the user has provided custom text for the description before, we're going to preserve it.
       // This may be unnecessary, but the concern is the user accidentally switching over to a file
       // and then wanting to revert back to their content.
-      project.description = {
+      updatedProject.description = {
         contentType: DescriptionContentType.URI,
         uri: descriptionUri,
         content: descriptionText
@@ -75,22 +76,22 @@ class Project extends Component<Props> {
       // If the user is entering a custom description, we're going to clear out the URI if one was
       // selected before. If the user accidentally switched, it's less of a concern for them to have
       // to re-link a file because it's quick to do.
-      project.description = {
+      updatedProject.description = {
         contentType: DescriptionContentType.MARKDOWN,
         content: descriptionText
       };
     }
 
-    if (this.props.onUpdated) {
+    if (onUpdated) {
       const user = this.context;
-      this.props.onUpdated(
-        project,
+      onUpdated(
+        updatedProject,
         ActionType.ABOUT_DETAILS_UPDATED,
         EntityType.PROJECT,
-        project.id,
+        updatedProject.id,
         ActionType.ABOUT_DETAILS_UPDATED,
         `${user} updated the project details in the 'About' page`,
-        { description: project.description, categories }
+        { description: updatedProject.description, categories }
       );
     }
   };
@@ -172,6 +173,7 @@ class Project extends Component<Props> {
       return;
     }
 
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
     if (currentProject.id !== project.id) {
       console.warn(
@@ -190,8 +192,8 @@ class Project extends Component<Props> {
       note
     );
 
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -208,6 +210,7 @@ class Project extends Component<Props> {
       return;
     }
 
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
 
     const action = { type: '', title: '', description: '', details: null };
@@ -220,8 +223,8 @@ class Project extends Component<Props> {
       note
     );
 
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PERSON,
@@ -246,6 +249,7 @@ class Project extends Component<Props> {
       return;
     }
 
+    const { onUpdated } = this.props;
     const project = { ...this.props.project };
     let assetsCopy = null;
     // Depending on if this is a core asset or an external asset, we need to select the correct container.  The rest of
@@ -286,8 +290,8 @@ class Project extends Component<Props> {
       project.assets = assetsCopy;
     }
 
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         project,
         action.type,
         isExternalAsset ? EntityType.EXTERNAL_ASSET : EntityType.ASSET,
@@ -312,6 +316,7 @@ class Project extends Component<Props> {
       return;
     }
 
+    const { onChecklistUpdated, checklistResponse } = this.props;
     const currentProject = { ...this.props.project };
     const action = { type: '', title: '', description: '', details: null };
     this.upsertNoteHandler(
@@ -323,7 +328,7 @@ class Project extends Component<Props> {
       note
     );
     // Once the checklist item is updated, we must also update the entire checklist linked to the project.
-    const updatedChecklist = this.props.checklistResponse.checklist.map(x => {
+    const updatedChecklist = checklistResponse.checklist.map(x => {
       if (x.id === checklistItem.id) {
         return checklistItem;
       }
@@ -331,8 +336,8 @@ class Project extends Component<Props> {
     });
     // Updates the checklist linked to the current project and saves the changes to the checklist file.
     // Note that the checklist object is not directly attached to the project object, as opposed to the asset and person objects.
-    if (this.props.onChecklistUpdated) {
-      this.props.onChecklistUpdated(
+    if (onChecklistUpdated) {
+      onChecklistUpdated(
         currentProject,
         updatedChecklist,
         action.type,
@@ -390,7 +395,7 @@ class Project extends Component<Props> {
   };
 
   performAssetAttributeUpdate = (assetUri, name, value, clearDescendants) => {
-
+    const { onUpdated } = this.props;
     const project = cloneDeep(this.props.project);
     const assetsCopy = project.assets;
 
@@ -413,8 +418,8 @@ class Project extends Component<Props> {
       AssetUtil.clearArchivedAttributeForDescendants(existingAsset);
     }
 
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         project,
         ActionType.ATTRIBUTE_UPDATED,
         EntityType.ASSET,
@@ -452,6 +457,7 @@ class Project extends Component<Props> {
    * @param {object} note The note to remove
    */
   assetDeleteNoteHandler = (asset, note) => {
+    const { onUpdated } = this.props;
     const project = { ...this.props.project };
 
     // Depending on if this is an external asset or a main asset, determine the right collection
@@ -481,8 +487,8 @@ class Project extends Component<Props> {
       project.assets = assetsCopy;
     }
 
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         project,
         ActionType.NOTE_DELETED,
         isExternalAsset ? EntityType.EXTERNAL_ASSET : EntityType.ASSET,
@@ -495,6 +501,7 @@ class Project extends Component<Props> {
   };
 
   projectDeleteNoteHandler = (project, note) => {
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
     if (currentProject.id !== project.id) {
       console.warn(
@@ -509,8 +516,8 @@ class Project extends Component<Props> {
       project.name,
       note
     );
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         project,
         ActionType.NOTE_DELETED,
         EntityType.PROJECT,
@@ -523,6 +530,7 @@ class Project extends Component<Props> {
   };
 
   personDeleteNoteHandler = (person, note) => {
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
     const actionDescription = this.deleteNoteHandler(
       person,
@@ -530,8 +538,8 @@ class Project extends Component<Props> {
       GeneralUtil.formatName(person.name),
       note
     );
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         ActionType.NOTE_DELETED,
         EntityType.PERSON,
@@ -549,6 +557,7 @@ class Project extends Component<Props> {
    * @param {object} note The note to delete
    */
   checklistDeleteNoteHandler = (checklistItem, note) => {
+    const { onChecklistUpdated, checklistResponse } = this.props;
     const currentProject = { ...this.props.project };
     const actionDescription = this.deleteNoteHandler(
       checklistItem,
@@ -557,7 +566,7 @@ class Project extends Component<Props> {
       note
     );
     // Once the checklist item is updated, we must also update the entire checklist linked to the project.
-    const updatedChecklist = this.props.checklistResponse.checklist.map(x => {
+    const updatedChecklist = checklistResponse.checklist.map(x => {
       if (x.id === checklistItem.id) {
         return checklistItem;
       }
@@ -565,8 +574,8 @@ class Project extends Component<Props> {
     });
     // Updates the checklist linked to the current project and saves the changes to the checklist file.
     // Note that the checklist object is not directly attached to the project object, as opposed to the asset and person objects.
-    if (this.props.onChecklistUpdated) {
-      this.props.onChecklistUpdated(
+    if (onChecklistUpdated) {
+      onChecklistUpdated(
         currentProject,
         updatedChecklist,
         ActionType.NOTE_DELETED,
@@ -580,6 +589,7 @@ class Project extends Component<Props> {
   }
 
   deletePersonHandler = person => {
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
 
     if (!currentProject.people) {
@@ -599,8 +609,8 @@ class Project extends Component<Props> {
     const actionDescription = `${user} deleted person ${GeneralUtil.formatName(
       person.name
     )} from project`;
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         ActionType.PERSON_DELETED,
         EntityType.PROJECT,
@@ -613,6 +623,7 @@ class Project extends Component<Props> {
   };
 
   createUpdatePersonHandler = person => {
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
 
     if (!currentProject.people) {
@@ -641,8 +652,8 @@ class Project extends Component<Props> {
       };
     }
 
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action,
         EntityType.PROJECT,
@@ -655,6 +666,7 @@ class Project extends Component<Props> {
   };
 
   assetGroupDeletedHandler = group => {
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
 
     const action = {
@@ -665,8 +677,8 @@ class Project extends Component<Props> {
     };
 
     ProjectUtil.removeAssetGroup(currentProject, group);
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -679,6 +691,7 @@ class Project extends Component<Props> {
   };
 
   assetGroupAddedHandler = group => {
+    const { onUpdated } = this.props;
     const user = this.context;
     const currentProject = { ...this.props.project };
 
@@ -690,8 +703,8 @@ class Project extends Component<Props> {
     };
 
     ProjectUtil.upsertAssetGroup(currentProject, group);
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -704,6 +717,7 @@ class Project extends Component<Props> {
   };
 
   assetGroupUpdatedHandler = group => {
+    const { onUpdated } = this.props;
     const user = this.context;
     const currentProject = { ...this.props.project };
 
@@ -716,8 +730,8 @@ class Project extends Component<Props> {
     };
 
     ProjectUtil.upsertAssetGroup(currentProject, group);
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -730,6 +744,7 @@ class Project extends Component<Props> {
   };
 
   externalAssetDeletedHandler = asset => {
+    const { onUpdated } = this.props;
     const currentProject = { ...this.props.project };
 
     const action = {
@@ -740,8 +755,8 @@ class Project extends Component<Props> {
     };
 
     ProjectUtil.removeExternalAsset(currentProject, asset);
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -754,6 +769,7 @@ class Project extends Component<Props> {
   };
 
   externalAssetAddedHandler = asset => {
+    const { onUpdated } = this.props;
     const user = this.context;
     const currentProject = { ...this.props.project };
 
@@ -765,8 +781,8 @@ class Project extends Component<Props> {
     };
 
     ProjectUtil.upsertExternalAsset(currentProject, asset);
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -779,6 +795,7 @@ class Project extends Component<Props> {
   };
 
   externalAssetUpdatedHandler = asset => {
+    const { onUpdated } = this.props;
     const user = this.context;
     const currentProject = { ...this.props.project };
     const oldExternalAsset = cloneDeep(this.props.project.externalAssets.children ?
@@ -791,8 +808,8 @@ class Project extends Component<Props> {
     };
 
     ProjectUtil.upsertExternalAsset(currentProject, asset);
-    if (this.props.onUpdated) {
-      this.props.onUpdated(
+    if (onUpdated) {
+      onUpdated(
         currentProject,
         action.type,
         EntityType.PROJECT,
@@ -819,11 +836,12 @@ class Project extends Component<Props> {
       return;
     }
 
+    const { onRename } = this.props;
     const currentProject = { ...this.props.project };
     currentProject.name = name;
 
-    if (this.props.onRename) {
-      this.props.onRename(
+    if (onRename) {
+      onRename(
         currentProject,
         name
       );
@@ -831,43 +849,57 @@ class Project extends Component<Props> {
   }
 
   render() {
+    const {
+      project = null,
+      onUpdated = null,
+      onAssetSelected = null,
+      onChecklistUpdated = null,
+      onDirtyStateChange = null,
+      onFavoriteClick,
+      logs = null,
+      checklistResponse = null,
+      configuration = null,
+      assetDynamicDetails = null,
+      scanStatus = null,
+    } = this.props;
+
     let content = <Welcome />;
-    if (this.props.project) {
-      const about = this.props.project ? (
+    if (project) {
+      const about = (
         <About
           onUpdateDetails={this.aboutDetailsUpdateHandler}
           onAddedNote={this.projectUpsertNoteHandler}
           onUpdatedNote={this.projectUpsertNoteHandler}
           onDeletedNote={this.projectDeleteNoteHandler}
-          project={this.props.project}
-          updates={this.props.logs ? this.props.logs.updates : null}
+          project={project}
+          updates={logs ? logs.updates : null}
           onClickUpdatesLink={this.clickUpdatesLinkHandler}
-          onDirtyStateChange={this.props.onDirtyStateChange}
+          onDirtyStateChange={onDirtyStateChange}
         />
-      ) : null;
-      const assets = this.props.project ? (
+      );
+      const assets = (
         <Assets
-          project={this.props.project}
+          project={project}
           onAddedAssetNote={this.assetUpsertNoteHandler}
           onUpdatedAssetNote={this.assetUpsertNoteHandler}
           onDeletedAssetNote={this.assetDeleteNoteHandler}
           onUpdatedAssetAttribute={this.assetUpdateAttributeHandler}
-          onSelectedAsset={this.props.onAssetSelected}
+          onSelectedAsset={onAssetSelected}
           onAddedAssetGroup={this.assetGroupAddedHandler}
           onUpdatedAssetGroup={this.assetGroupUpdatedHandler}
           onDeletedAssetGroup={this.assetGroupDeletedHandler}
           onAddedExternalAsset={this.externalAssetAddedHandler}
           onUpdatedExternalAsset={this.externalAssetUpdatedHandler}
           onDeletedExternalAsset={this.externalAssetDeletedHandler}
-          assetAttributes={this.props.configuration.assetAttributes}
-          dynamicDetails={this.props.assetDynamicDetails}
-          scanStatus={this.props.scanStatus}
+          assetAttributes={configuration.assetAttributes}
+          dynamicDetails={assetDynamicDetails}
+          scanStatus={scanStatus}
         />
-      ) : null;
-      const workflow = this.props.project ? <Workflow project={this.props.project} /> : null;
-      const name = this.props.project ? (
+      );
+      const workflow = <Workflow project={project} />;
+      const name = (
         <EditableLabel
-          text={this.props.project.name}
+          text={project.name}
           labelFontWeight="bold"
           containerClassName={styles.projectName}
           inputFontWeight="bold"
@@ -875,25 +907,25 @@ class Project extends Component<Props> {
           inputWidth="100%"
           onFocusOut={this.projectNameUpdateHandler}
         />
-      ) : null;
+      );
 
-      const projectPath = this.props.project ? (
-        <div className={styles.projectPath}>{this.props.project.path}</div>
-      ) : null;
+      const projectPath = (
+        <div className={styles.projectPath}>{project.path}</div>
+      );
 
-      const projectNotes = this.props.project ? (
+      const projectNotes = (
         <ProjectNotes
-          project={this.props.project}
+          project={project}
           onAddedNote={this.projectUpsertNoteHandler}
           onUpdatedNote={this.projectUpsertNoteHandler}
           onDeletedNote={this.projectDeleteNoteHandler}
         />
-      ) : null;
+      );
 
-      const people = this.props.project ? (
+      const people = (
         <People
-          project={this.props.project}
-          list={this.props.project.people}
+          project={project}
+          list={project.people}
           mode="project"
           onSave={this.createUpdatePersonHandler}
           onDelete={this.deletePersonHandler}
@@ -901,31 +933,31 @@ class Project extends Component<Props> {
           onUpdatedPersonNote={this.personUpsertNoteHandler}
           onDeletedPersonNote={this.personDeleteNoteHandler}
         />
-      ) : null;
+      );
 
       const projectLog =
-        this.props.project && this.props.logs ? (
+        logs ? (
           <ProjectLog
-            project={this.props.project}
-            error={this.props.logs.errorMessage}
-            feed={this.props.logs.logs}
-            updates={this.props.logs.updates}
+            project={project}
+            error={logs.errorMessage}
+            feed={logs.logs}
+            updates={logs.updates}
             showUpdates={this.state.showLogUpdatesOnly}
           />
         ) : null;
 
       const checklist =
-        this.props.project && this.props.checklistResponse ? (
+        checklistResponse ? (
           <ReproChecklist
-            project={this.props.project}
-            checklist={this.props.checklistResponse.checklist}
-            error={this.props.checklistResponse.errorMessage}
-            onUpdated={this.props.onChecklistUpdated}
+            project={project}
+            checklist={checklistResponse.checklist}
+            error={checklistResponse.errorMessage}
+            onUpdated={onChecklistUpdated}
             onAddedNote={this.checklistUpsertNoteHandler}
             onUpdatedNote={this.checklistUpsertNoteHandler}
             onDeletedNote={this.checklistDeleteNoteHandler}
-            onSelectedAsset={this.props.onAssetSelected}
-            scanStatus={this.props.scanStatus}
+            onSelectedAsset={onAssetSelected}
+            scanStatus={scanStatus}
           />
         ) : null;
 
@@ -935,9 +967,9 @@ class Project extends Component<Props> {
             <div className={styles.titleContainer}>
               <IconButton
                 color="inherit"
-                onClick={() => this.props.onFavoriteClick(this.props.project.id)}
+                onClick={() => onFavoriteClick(project.id)}
               >
-                {this.props.project && this.props.project.favorite ? <Star /> : <StarBorder />}
+                {project.favorite ? <Star /> : <StarBorder />}
               </IconButton>
               <div className={styles.title}>
                 {name}
@@ -1044,19 +1076,6 @@ Project.propTypes = {
   scanStatus: PropTypes.string
 };
 
-Project.defaultProps = {
-  project: null,
-  onUpdated: null,
-  onAssetSelected: null,
-  onChecklistUpdated: null,
-  onDirtyStateChange: null,
-  logs: null,
-  checklistResponse: null,
-  configuration: null,
-  assetDynamicDetails: null,
-  scanStatus: null
-};
-
 Project.contextType = UserContext;
 
 export default Project;
diff --git a/app/components/Project/ProjectUpdateSummary/ProjectUpdateSummary.js b/app/components/Project/ProjectUpdateSummary/ProjectUpdateSummary.js
index f91063a7..1239a1e1 100644
--- a/app/components/Project/ProjectUpdateSummary/ProjectUpdateSummary.js
+++ b/app/components/Project/ProjectUpdateSummary/ProjectUpdateSummary.js
@@ -5,7 +5,7 @@ import styles from './ProjectUpdateSummary.css';
 import ProjectUtil from '../../../utils/project';
 
 function projectUpdateSummary(props) {
-  const { updates } = props;
+  const { updates = null } = props;
   let control = null;
   // We only want to display content if the user has looked at the
   // project before (not a "first view"), and there is something
@@ -35,8 +35,4 @@ projectUpdateSummary.propTypes = {
   onClickLink: PropTypes.func.isRequired,
 };
 
-projectUpdateSummary.defaultProps = {
-  updates: null,
-};
-
 export default projectUpdateSummary;
diff --git a/app/components/ProjectLog/ProjectLog.js b/app/components/ProjectLog/ProjectLog.js
index 1bd2fe42..5473b88d 100644
--- a/app/components/ProjectLog/ProjectLog.js
+++ b/app/components/ProjectLog/ProjectLog.js
@@ -79,7 +79,7 @@ function projectLog(props) {
   const [filterText, setFilterText] = useState('');
   const [expandAll, setExpandAll] = useState(false);
   const [tableKey, setTableKey] = useState(0);
-  const { feed, error, updates } = props;
+  const { feed = null, error = null, updates = null } = props;
   const hasWhatsNewUpdates = updates !== null && !updates.upToDate;
   const [filterWhatsNew, setFilterWhatsNew] = useState(hasWhatsNewUpdates);
   const [pending, setPending] = useState(true);
@@ -185,10 +185,4 @@ projectLog.propTypes = {
   error: PropTypes.string,
 };
 
-projectLog.defaultProps = {
-  feed: null,
-  updates: null,
-  error: null,
-};
-
 export default projectLog;
diff --git a/app/components/ProjectLog/ProjectLogRow/ProjectLogRow.js b/app/components/ProjectLog/ProjectLogRow/ProjectLogRow.js
index 91a7d711..1f695e9d 100644
--- a/app/components/ProjectLog/ProjectLogRow/ProjectLogRow.js
+++ b/app/components/ProjectLog/ProjectLogRow/ProjectLogRow.js
@@ -6,7 +6,7 @@ import { ActionType } from '../../../constants/constants';
 import styles from './ProjectLogRow.css';
 
 function projectLogRow(props) {
-  const { data } = props;
+  const { data = null } = props;
   let detail = null;
   if (data) {
     switch (data.type) {
@@ -26,8 +26,4 @@ projectLogRow.propTypes = {
   data: PropTypes.object,
 };
 
-projectLogRow.defaultProps = {
-  data: null,
-};
-
 export default projectLogRow;
diff --git a/app/components/ProjectTemplateList/ProjectTemplateList.js b/app/components/ProjectTemplateList/ProjectTemplateList.js
index 39ca321e..2125f45d 100644
--- a/app/components/ProjectTemplateList/ProjectTemplateList.js
+++ b/app/components/ProjectTemplateList/ProjectTemplateList.js
@@ -2,18 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { List, ListItemButton, ListItemText } from '@mui/material';
 
-function ProjectTemplateList(props) {
+function ProjectTemplateList({ templates, selectedTemplate = null, onSelect }) {
   let projectTypeList = null;
-  if (props.templates !== null) {
-    projectTypeList = props.templates.map((type) => (
+  if (templates !== null) {
+    projectTypeList = templates.map((type) => (
       <ListItemButton
         selected={
-          (props.selectedTemplate &&
-          type.id === props.selectedTemplate.id &&
-          type.version === props.selectedTemplate.version)
+          (selectedTemplate &&
+          type.id === selectedTemplate.id &&
+          type.version === selectedTemplate.version)
         }
         key={type.id}
-        onClick={() => props.onSelect(type.id, type.version)}
+        onClick={() => onSelect(type.id, type.version)}
       >
         <ListItemText primary={type.name} secondary={type.description} />
       </ListItemButton>
@@ -23,10 +23,6 @@ function ProjectTemplateList(props) {
   return <List dense>{projectTypeList}</List>;
 }
 
-ProjectTemplateList.defaultProps = {
-  selectedTemplate: null,
-};
-
 ProjectTemplateList.propTypes = {
   templates: PropTypes.array.isRequired,
   selectedTemplate: PropTypes.object,
diff --git a/app/components/ProjectTemplatePreview/ProjectTemplatePreview.js b/app/components/ProjectTemplatePreview/ProjectTemplatePreview.js
index 42d99c29..b50296fa 100644
--- a/app/components/ProjectTemplatePreview/ProjectTemplatePreview.js
+++ b/app/components/ProjectTemplatePreview/ProjectTemplatePreview.js
@@ -40,13 +40,15 @@ class ProjectTemplatePreview extends Component {
   }
 
   render() {
+    const { template = null } = this.props;
+
     let preview = (
       <div className={styles.placeholder}>Please select a template from a list on the left</div>
     );
-    if (this.props.template) {
+    if (template) {
       let templateContents = [];
-      if (this.props.template.contents) {
-        templateContents = contentsToNodes(this.props.template.contents);
+      if (template.contents) {
+        templateContents = contentsToNodes(template.contents);
       }
       const templateNodes = [
         {
@@ -97,8 +99,4 @@ ProjectTemplatePreview.propTypes = {
   template: PropTypes.object,
 };
 
-ProjectTemplatePreview.defaultProps = {
-  template: null,
-};
-
 export default ProjectTemplatePreview;
diff --git a/app/components/Projects/ProjectEntry/ProjectEntry.js b/app/components/Projects/ProjectEntry/ProjectEntry.js
index cc11bcb0..9ebaf9e9 100644
--- a/app/components/Projects/ProjectEntry/ProjectEntry.js
+++ b/app/components/Projects/ProjectEntry/ProjectEntry.js
@@ -19,6 +19,7 @@ const CustomTooltip = styled(({ className, ...props }) => (
 }));
 
 function projectEntry(props) {
+  const { selected = false, hasUpdate = false } = props;
   const [isTooltipOpen, setTooltipOpen] = useState(false);
 
   const iconClasses = [styles.favoriteIicon];
@@ -37,12 +38,12 @@ function projectEntry(props) {
   }
 
   const divClasses = [styles.container];
-  if (props.selected) {
+  if (selected) {
     divClasses.push(styles.selected);
   }
 
   let updateIcon = null;
-  if (props.hasUpdate) {
+  if (hasUpdate) {
     updateIcon = <FontAwesomeIcon className={styles.updateIcon} icon="bell" />;
   }
 
@@ -93,9 +94,4 @@ projectEntry.propTypes = {
   hasUpdate: PropTypes.bool,
 };
 
-projectEntry.defaultProps = {
-  selected: false,
-  hasUpdate: false,
-};
-
 export default projectEntry;
diff --git a/app/components/Projects/ProjectGroup/ProjectGroup.js b/app/components/Projects/ProjectGroup/ProjectGroup.js
index d202b7ce..3a63ea7e 100644
--- a/app/components/Projects/ProjectGroup/ProjectGroup.js
+++ b/app/components/Projects/ProjectGroup/ProjectGroup.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import ProjectEntry from '../ProjectEntry/ProjectEntry';
 import styles from './ProjectGroup.css';
 
-function projectGroup(props) {
+function projectGroup({ emptyMessage = 'There are no projects to display in this list', projects = [], ...rest }) {
+  const props = { emptyMessage, projects, ...rest };
   let projectList = <div className={styles.emptyMessage}>{props.emptyMessage}</div>;
   if (props.projects && props.projects.length > 0) {
     projectList = props.projects.map((item) => <ProjectEntry key={item.id} project={item} />);
@@ -23,9 +24,4 @@ projectGroup.propTypes = {
   projects: PropTypes.array,
 };
 
-projectGroup.defaultProps = {
-  emptyMessage: 'There are no projects to display in this list',
-  projects: [],
-};
-
 export default projectGroup;
diff --git a/app/components/Projects/ProjectListEntryMenu/ProjectListEntryMenu.js b/app/components/Projects/ProjectListEntryMenu/ProjectListEntryMenu.js
index 35b1fdd6..4e6a7e69 100644
--- a/app/components/Projects/ProjectListEntryMenu/ProjectListEntryMenu.js
+++ b/app/components/Projects/ProjectListEntryMenu/ProjectListEntryMenu.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import Messages from '../../../constants/messages';
 import Constants from '../../../constants/constants';
 
-function projectListEntryMenu(props) {
+function projectListEntryMenu({ anchorElement = null, project = null, ...rest }) {
+  const props = { anchorElement, project, ...rest };
   if (!props.project) {
     return null;
   }
@@ -72,9 +73,4 @@ projectListEntryMenu.propTypes = {
   onMenuClick: PropTypes.func.isRequired,
 };
 
-projectListEntryMenu.defaultProps = {
-  anchorElement: null,
-  project: null,
-};
-
 export default projectListEntryMenu;
diff --git a/app/components/Projects/Projects.js b/app/components/Projects/Projects.js
index 5eecf7b3..f6340f01 100644
--- a/app/components/Projects/Projects.js
+++ b/app/components/Projects/Projects.js
@@ -14,20 +14,22 @@ class Projects extends Component {
       return null;
     }
 
+    const { selectedProject, onSelect, onFavoriteClick, onMenuClick } = this.props;
+
     const projectEntries = projects.map((item) => (
       <ProjectEntry
         key={item.id}
         hasUpdate={item.hasUpdate}
         project={item}
-        selected={this.props.selectedProject && this.props.selectedProject.id === item.id}
-        onSelect={() => this.props.onSelect(item)}
+        selected={selectedProject && selectedProject.id === item.id}
+        onSelect={() => onSelect(item)}
         onFavoriteClick={(e) => {
           e.stopPropagation();
-          this.props.onFavoriteClick(item.id);
+          onFavoriteClick(item.id);
         }}
         onMenuClick={(event) => {
           event.stopPropagation();
-          this.props.onMenuClick(event.currentTarget, item);
+          onMenuClick(event.currentTarget, item);
         }}
       />
     ));
@@ -44,33 +46,43 @@ class Projects extends Component {
   }
 
   render() {
+    const {
+      loaded,
+      error,
+      errorMessage = null,
+      projects,
+      onRefresh,
+      onAddProject,
+      onSelect,
+    } = this.props;
+
     let projectDetails = <CircularProgress className={styles.progress} />;
-    
-    if (this.props.loaded) {
-      if (this.props.error) {
+
+    if (loaded) {
+      if (error) {
         projectDetails = (
           <Error>
-            {this.props.errorMessage}
-            <button type="button" onClick={this.props.onRefresh}>
+            {errorMessage}
+            <button type="button" onClick={onRefresh}>
               Reload Projects
             </button>
           </Error>
         );
       } else {
         // Create three project categories
-        const pinnedProjects = this.props.projects.filter((x) => x.favorite);
-        const activeProjects = this.props.projects.filter((x) => !x.favorite && (!x.status || x.status === Constants.ProjectStatus.ACTIVE));
-        const pastProjects = this.props.projects.filter((x) => !x.favorite && x.status === Constants.ProjectStatus.PAST);
+        const pinnedProjects = projects.filter((x) => x.favorite);
+        const activeProjects = projects.filter((x) => !x.favorite && (!x.status || x.status === Constants.ProjectStatus.ACTIVE));
+        const pastProjects = projects.filter((x) => !x.favorite && x.status === Constants.ProjectStatus.PAST);
         const sections = [];
-        
+
         if (pinnedProjects.length > 0) {
           sections.push(this.renderProjectSection(pinnedProjects, 'PINNED PROJECTS', pinnedProjects.length));
         }
-        
+
         if (activeProjects.length > 0) {
           sections.push(this.renderProjectSection(activeProjects, 'ACTIVE PROJECTS', activeProjects.length));
         }
-        
+
         if (pastProjects.length > 0) {
           sections.push(this.renderProjectSection(pastProjects, 'PAST PROJECTS', pastProjects.length));
         }
@@ -92,10 +104,10 @@ class Projects extends Component {
       <div className={styles.container} data-tid="container">
         <div className={styles.titleContainer}>
           <div className={styles.title}>Projects</div>
-          <IconButton color="inherit" onClick={this.props.onAddProject}>
+          <IconButton color="inherit" onClick={onAddProject}>
             <AddIcon />
           </IconButton>
-          <IconButton className={styles.floatRight} color="inherit" onClick={this.props.onRefresh}>
+          <IconButton className={styles.floatRight} color="inherit" onClick={onRefresh}>
             <RefreshIcon />
           </IconButton>
         </div>
@@ -104,7 +116,7 @@ class Projects extends Component {
           className={styles.filler}
           onClick={(e) => {
             e.stopPropagation();
-            this.props.onSelect(null);
+            onSelect(null);
           }}
         />
       </div>
@@ -125,9 +137,4 @@ Projects.propTypes = {
   onAddProject: PropTypes.func.isRequired,
 };
 
-Projects.defaultProps = {
-  errorMessage: null,
-  selectedProject: null,
-};
-
-export default Projects;
\ No newline at end of file
+export default Projects;
diff --git a/app/components/ReproChecklist/ReproChecklist.js b/app/components/ReproChecklist/ReproChecklist.js
index ddc9bbbf..1e145bef 100644
--- a/app/components/ReproChecklist/ReproChecklist.js
+++ b/app/components/ReproChecklist/ReproChecklist.js
@@ -27,17 +27,16 @@ const scanFunctions = {
   Documentation: ChecklistUtil.findDocumentationFiles,
 };
 
-function ReproChecklist(props) {
-  const {
-    project,
-    checklist,
-    error,
-    onUpdated,
-    onAddedNote,
-    onUpdatedNote,
-    onDeletedNote,
-    onSelectedAsset,
-  } = props;
+function ReproChecklist({
+  project = null,
+  checklist = null,
+  error = null,
+  onUpdated = null,
+  onAddedNote = null,
+  onUpdatedNote = null,
+  onDeletedNote = null,
+  onSelectedAsset = null,
+}) {
   const [openExportDialog, setOpenExportDialog] = useState(false);
 
   // this useEffect hook is here to load the scan results for all the checklist statements
@@ -139,15 +138,4 @@ ReproChecklist.propTypes = {
   onSelectedAsset: PropTypes.func.isRequired,
 };
 
-ReproChecklist.defaultProps = {
-  project: null,
-  checklist: null,
-  error: null,
-  onUpdated: null,
-  onAddedNote: null,
-  onUpdatedNote: null,
-  onDeletedNote: null,
-  onSelectedAsset: null,
-};
-
 export default ReproChecklist;
diff --git a/app/components/SelectProjectTemplate/SelectProjectTemplate.js b/app/components/SelectProjectTemplate/SelectProjectTemplate.js
index 95552058..0cd0ea67 100644
--- a/app/components/SelectProjectTemplate/SelectProjectTemplate.js
+++ b/app/components/SelectProjectTemplate/SelectProjectTemplate.js
@@ -7,12 +7,13 @@ import styles from './SelectProjectTemplate.css';
 
 class SelectProjectTemplate extends Component {
   render() {
+    const { projectTemplates, selectedTemplate = null, onSelectProjectTemplate } = this.props;
     let template = null;
-    if (this.props.projectTemplates && this.props.selectedTemplate) {
-      template = this.props.projectTemplates.find(
+    if (projectTemplates && selectedTemplate) {
+      template = projectTemplates.find(
         (x) =>
-          x.id === this.props.selectedTemplate.id &&
-          x.version === this.props.selectedTemplate.version,
+          x.id === selectedTemplate.id &&
+          x.version === selectedTemplate.version,
       );
     }
     return (
@@ -20,9 +21,9 @@ class SelectProjectTemplate extends Component {
         <div className={styles.templateList}>
           <strong>Available templates:</strong>
           <ProjectTemplateList
-            templates={this.props.projectTemplates}
-            selectedTemplate={this.props.selectedTemplate}
-            onSelect={this.props.onSelectProjectTemplate}
+            templates={projectTemplates}
+            selectedTemplate={selectedTemplate}
+            onSelect={onSelectProjectTemplate}
           />
         </div>
         <div className={styles.templatePreview}>
@@ -39,8 +40,4 @@ SelectProjectTemplate.propTypes = {
   onSelectProjectTemplate: PropTypes.func.isRequired,
 };
 
-SelectProjectTemplate.defaultProps = {
-  selectedTemplate: null,
-};
-
 export default SelectProjectTemplate;
diff --git a/app/components/Workflow/DependencyGraph/DependencyGraphEChart.js b/app/components/Workflow/DependencyGraph/DependencyGraphEChart.js
index e8928a25..7cf267d3 100644
--- a/app/components/Workflow/DependencyGraph/DependencyGraphEChart.js
+++ b/app/components/Workflow/DependencyGraph/DependencyGraphEChart.js
@@ -82,8 +82,7 @@ function getIcon(node) {
   return iconUrl;
 }
 
-function DependencyGraphEChart(props) {
-  const { assets, zoomLevel } = props;
+function DependencyGraphEChart({ assets = null, zoomLevel = 1 }) {
   const [graphData, setGraphData] = useState(null);
   const [filter, setFilter] = useState([]);
 
@@ -181,9 +180,4 @@ DependencyGraphEChart.propTypes = {
   zoomLevel: PropTypes.number,
 };
 
-DependencyGraphEChart.defaultProps = {
-  assets: null,
-  zoomLevel: 1,
-};
-
 export default DependencyGraphEChart;
diff --git a/app/containers/AssetGroupDialog/AssetGroupDialog.js b/app/containers/AssetGroupDialog/AssetGroupDialog.js
index 19f19c45..0130009b 100644
--- a/app/containers/AssetGroupDialog/AssetGroupDialog.js
+++ b/app/containers/AssetGroupDialog/AssetGroupDialog.js
@@ -19,12 +19,13 @@ function PaperComponent(props) {
 class AssetGroupDialog extends Component {
   constructor(props) {
     super(props);
+    const { id = null, name = null, details = null, assets = null } = props;
     this.state = {
       errorMessage: null,
-      id: props.id ? props.id : null,
-      name: props.name ? props.name : '',
-      details: props.details ? props.details : '',
-      assets: props.assets ? props.assets : [],
+      id: id ? id : null,
+      name: name ? name : '',
+      details: details ? details : '',
+      assets: assets ? assets : [],
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
@@ -55,6 +56,7 @@ class AssetGroupDialog extends Component {
   }
 
   render() {
+    const { onClose, open = false, onSave } = this.props;
     let error = null;
     if (this.state.errorMessage) {
       error = <Error style={{ marginTop: '15px' }}>{this.state.errorMessage}</Error>;
@@ -62,10 +64,10 @@ class AssetGroupDialog extends Component {
 
     return (
       <Dialog
-        onClose={this.props.onClose}
+        onClose={onClose}
         aria-labelledby="asset-group-dialog-title"
         PaperComponent={PaperComponent}
-        open={this.props.open}
+        open={open}
         fullWidth
         maxWidth="sm"
       >
@@ -105,7 +107,7 @@ class AssetGroupDialog extends Component {
           <Button color="primary" onClick={this.handleSaveAssetGroup}>
             Save
           </Button>
-          <Button color="primary" onClick={this.props.onClose}>
+          <Button color="primary" onClick={onClose}>
             Cancel
           </Button>
         </DialogActions>
@@ -125,15 +127,6 @@ AssetGroupDialog.propTypes = {
   onSave: PropTypes.func,
 };
 
-AssetGroupDialog.defaultProps = {
-  id: null,
-  name: null,
-  details: null,
-  assets: null,
-  open: false,
-  onSave: null,
-};
-
 AssetGroupDialog.contextType = UserContext;
 
 export default AssetGroupDialog;
diff --git a/app/containers/CreateProjectDialog/CreateProjectDialog.js b/app/containers/CreateProjectDialog/CreateProjectDialog.js
index cfb0a908..09f1bbc7 100644
--- a/app/containers/CreateProjectDialog/CreateProjectDialog.js
+++ b/app/containers/CreateProjectDialog/CreateProjectDialog.js
@@ -345,6 +345,7 @@ class CreateProjectDialog extends Component {
     });
   }
   render() {
+    const { open, onClose, projectTemplates } = this.props;
     const currentStep = this.state.step;
     const stepDetails = CreateProjectDialog.steps.find((x) => x.step === currentStep);
     const hasNextStep = stepDetails.next !== null && stepDetails.next !== undefined;
@@ -352,24 +353,24 @@ class CreateProjectDialog extends Component {
     let dialogTitle = null;
     let progressButton = null;
 
-if (hasNextStep) {
-  progressButton =
-    stepDetails.next === 'Create' ? (
-          <Button
-      color="primary"
-      disabled={!this.state.canProgress}
-      onClick={this.handleCreateProject}
-    >
-      Create Project
-      <ArrowForwardIcon />
-    </Button>
-    ) : (
-      <Button color="primary" disabled={!this.state.canProgress} onClick={this.handleNext}>
-        Next
-        <ArrowForwardIcon />
-      </Button>
-    );
-}
+    if (hasNextStep) {
+      progressButton =
+        stepDetails.next === 'Create' ? (
+              <Button
+          color="primary"
+          disabled={!this.state.canProgress}
+          onClick={this.handleCreateProject}
+        >
+          Create Project
+          <ArrowForwardIcon />
+        </Button>
+        ) : (
+          <Button color="primary" disabled={!this.state.canProgress} onClick={this.handleNext}>
+            Next
+            <ArrowForwardIcon />
+          </Button>
+        );
+    }
     let backButton = (
       <Button onClick={this.handleBack} color="primary" className={styles.backButton}>
         <ArrowBackIcon />
@@ -381,7 +382,7 @@ if (hasNextStep) {
         dialogTitle = 'Select Project Type';
         displayComponent = (
           <SelectProjectTemplate
-            projectTemplates={this.props.projectTemplates}
+            projectTemplates={projectTemplates}
             selectedTemplate={this.state.selectedTemplate}
             onSelectProjectTemplate={this.handleSelectProjectTemplate}
             onFinalizeProjectTemplate={this.handleFinalizeProjectTemplate}
@@ -469,10 +470,10 @@ if (hasNextStep) {
 
     return (
       <Dialog
-        onClose={this.props.onClose}
+        onClose={onClose}
         aria-labelledby="project-dialog-title"
         PaperComponent={PaperComponent}
-        open={this.props.open}
+        open={open}
         fullWidth
         maxWidth="md"
       >
@@ -484,7 +485,7 @@ if (hasNextStep) {
         <DialogActions>
           {backButton}
           {progressButton}
-          <Button color="primary" onClick={this.props.onClose}>
+          <Button color="primary" onClick={onClose}>
             Cancel
           </Button>
         </DialogActions>
@@ -499,10 +500,6 @@ CreateProjectDialog.propTypes = {
   open: PropTypes.bool,
 };
 
-CreateProjectDialog.defaultProps = {
-  open: false,
-};
-
 CreateProjectDialog.contextType = UserContext;
 
 export default CreateProjectDialog;
diff --git a/app/containers/CreateUpdatePersonDialog/CreateUpdatePersonDialog.js b/app/containers/CreateUpdatePersonDialog/CreateUpdatePersonDialog.js
index edc7631c..9c70d708 100644
--- a/app/containers/CreateUpdatePersonDialog/CreateUpdatePersonDialog.js
+++ b/app/containers/CreateUpdatePersonDialog/CreateUpdatePersonDialog.js
@@ -31,13 +31,14 @@ function PaperComponent(props) {
 class CreateUpdatePersonDialog extends Component {
   constructor(props) {
     super(props);
+    const { id = null, name = null, affiliation = null, roles = [] } = props;
     this.state = {
       errorMessage: null,
-      id: props.id ? props.id : '',
-      firstName: props.name ? props.name.first : '',
-      lastName: props.name ? props.name.last : '',
-      affiliation: props.affiliation ? props.affiliation : '',
-      roles: props.roles ? props.roles : [],
+      id: id ? id : '',
+      firstName: name ? name.first : '',
+      lastName: name ? name.last : '',
+      affiliation: affiliation ? affiliation : '',
+      roles: roles ? roles : [],
       pendingRoleInput: '',
     };
 
@@ -135,12 +136,13 @@ class CreateUpdatePersonDialog extends Component {
   }
 
   render() {
-    const dialogTitle = this.props.id ? 'Edit Person' : 'Add Person';
+    const { id, onClose, open = false, mode, directory = [], user = null, project = null } = this.props;
+    const dialogTitle = id ? 'Edit Person' : 'Add Person';
     let error = null;
     if (this.state.errorMessage) {
       error = <Error style={{ marginTop: '15px' }}>{this.state.errorMessage}</Error>;
     }
-    const projectMode = this.props.mode.toLowerCase() === 'project';
+    const projectMode = mode.toLowerCase() === 'project';
     let roles = null;
     if (projectMode) {
       roles = (
@@ -155,27 +157,27 @@ class CreateUpdatePersonDialog extends Component {
     //  - We are invoking this dialog for a project
     //  - The user has a directory populated
     //  - We are in create mode (not edit mode)
-    let directory = null;
-    if (projectMode && this.props.directory && this.props.directory.length > 0 && !this.props.id) {
+    let directoryUI = null;
+    if (projectMode && directory && directory.length > 0 && !id) {
       // Sort the directory so that the most recently added person in the MRU list/directory
       // appears at the top.  Note that we are making a copy of the array because we are going
       // to (possibly) add an item to it.  We don't want to update the original array with
       // that value if we do add it.
-      const sortedDirectory = [...this.props.directory].sort((a, b) =>
+      const sortedDirectory = [...directory].sort((a, b) =>
         a.added > b.added ? -1 : b.added > a.added ? 1 : 0,
       );
 
       // If there is the user's information, push that to the top of the directory
       // as the first entry, and indicate that it is the user.
-      if (this.props.user && this.props.user.name && this.props.user.name.display) {
-        const user = { ...this.props.user, userEntry: true };
-        sortedDirectory.unshift(user);
+      if (user && user.name && user.name.display) {
+        const userEntry = { ...user, userEntry: true };
+        sortedDirectory.unshift(userEntry);
       }
 
       // Aggregate authors from project assets if we have a project loaded
       const extractedAuthors = [];
       const extractedAuthorKeys = new Set();
-      if (this.props.project && this.props.project.assets) {
+      if (project && project.assets) {
         const gatherAuthors = (asset) => {
           if (asset && asset.metadata) {
             asset.metadata.forEach(m => {
@@ -213,7 +215,7 @@ class CreateUpdatePersonDialog extends Component {
             asset.children.forEach(gatherAuthors);
           }
         };
-        gatherAuthors(this.props.project.assets);
+        gatherAuthors(project.assets);
       }
 
       // Combines and filter out extracted authors that are already in the file
@@ -225,7 +227,7 @@ class CreateUpdatePersonDialog extends Component {
 
       const fullDirectoryOptions = [...sortedDirectory, ...uniqueExtracted];
 
-      directory = (
+      directoryUI = (
         <div className={styles.directoryPanel}>
           <Autocomplete
             id="user-directory"
@@ -250,10 +252,10 @@ class CreateUpdatePersonDialog extends Component {
 
     return (
       <Dialog
-        onClose={this.props.onClose}
+        onClose={onClose}
         aria-labelledby="person-dialog-title"
         PaperComponent={PaperComponent}
-        open={this.props.open}
+        open={open}
         fullWidth
         maxWidth="sm"
       >
@@ -261,7 +263,7 @@ class CreateUpdatePersonDialog extends Component {
           {dialogTitle}
         </DialogTitle>
         <form onSubmit={this.onSubmit}>
-          {directory}
+          {directoryUI}
           <div className={styles.formBody}>
             <div className={styles.formRow}>
               <label className={styles.personLabel}>Name:</label>
@@ -302,7 +304,7 @@ class CreateUpdatePersonDialog extends Component {
           <Button color="primary" onClick={this.handleCreateUpdatePerson}>
             Save
           </Button>
-          <Button color="primary" onClick={this.props.onClose}>
+          <Button color="primary" onClick={onClose}>
             Cancel
           </Button>
         </DialogActions>
@@ -326,18 +328,6 @@ CreateUpdatePersonDialog.propTypes = {
   onSave: PropTypes.func,
 };
 
-CreateUpdatePersonDialog.defaultProps = {
-  project: null,
-  directory: [],
-  user: null,
-  id: null,
-  name: null,
-  affiliation: null,
-  roles: [],
-  open: false,
-  onSave: null,
-};
-
 CreateUpdatePersonDialog.contextType = UserContext;
 
 export default CreateUpdatePersonDialog;
diff --git a/app/containers/ExternalAssetDialog/ExternalAssetDialog.js b/app/containers/ExternalAssetDialog/ExternalAssetDialog.js
index a3f2dc30..a5505889 100644
--- a/app/containers/ExternalAssetDialog/ExternalAssetDialog.js
+++ b/app/containers/ExternalAssetDialog/ExternalAssetDialog.js
@@ -23,12 +23,13 @@ function PaperComponent(props) {
 class ExternalAssetDialog extends Component {
   constructor(props) {
     super(props);
+    const { uri = null, name = null, type = Constants.AssetType.URL, isNew = true } = props;
     this.state = {
       errorMessage: null,
-      uri: props.uri || '',
-      name: props.name || '',
-      type: props.type || Constants.AssetType.URL,
-      isNew: props.isNew !== undefined ? props.isNew : true,
+      uri: uri || '',
+      name: name || '',
+      type: type || Constants.AssetType.URL,
+      isNew: isNew !== undefined ? isNew : true,
       validPath: true
     };
 
@@ -119,6 +120,7 @@ class ExternalAssetDialog extends Component {
   };
 
   render() {
+    const { onClose, open = false } = this.props;
     let error = null;
     if (this.state.errorMessage) {
       error = <Error style={{ marginTop: '15px' }}>{this.state.errorMessage}</Error>;
@@ -133,10 +135,10 @@ class ExternalAssetDialog extends Component {
 
     return (
       <Dialog
-        onClose={this.props.onClose}
+        onClose={onClose}
         aria-labelledby="external-asset-dialog-title"
         PaperComponent={PaperComponent}
-        open={this.props.open}
+        open={open}
         fullWidth
         maxWidth="sm"
       >
@@ -200,7 +202,7 @@ class ExternalAssetDialog extends Component {
           <Button color="primary" onClick={this.handleSave}>
             Save
           </Button>
-          <Button color="primary" onClick={this.props.onClose}>
+          <Button color="primary" onClick={onClose}>
             Cancel
           </Button>
         </DialogActions>
@@ -220,15 +222,6 @@ ExternalAssetDialog.propTypes = {
   onSave: PropTypes.func,
 };
 
-ExternalAssetDialog.defaultProps = {
-  uri: null,
-  type: Constants.AssetType.URL,
-  name: null,
-  isNew: true,
-  open: false,
-  onSave: null,
-};
-
 ExternalAssetDialog.contextType = UserContext;
 
 export default ExternalAssetDialog;
diff --git a/app/containers/UserProfileDialog/UserProfileDialog.js b/app/containers/UserProfileDialog/UserProfileDialog.js
index fa2401c2..5cb60a44 100644
--- a/app/containers/UserProfileDialog/UserProfileDialog.js
+++ b/app/containers/UserProfileDialog/UserProfileDialog.js
@@ -22,13 +22,14 @@ function PaperComponent(props) {
 class UserProfileDialog extends Component {
   constructor(props) {
     super(props);
+    const { id = null, name = null, affiliation = null } = props;
     this.state = {
       errorMessage: null,
-      id: props.id ? props.id : Constants.UndefinedDefaults.USER,
-      displayName: props.name ? props.name.display : '',
-      firstName: props.name ? props.name.first : '',
-      lastName: props.name ? props.name.last : '',
-      affiliation: props.affiliation ? props.affiliation : '',
+      id: id ? id : Constants.UndefinedDefaults.USER,
+      displayName: name ? name.display : '',
+      firstName: name ? name.first : '',
+      lastName: name ? name.last : '',
+      affiliation: affiliation ? affiliation : '',
     };
 
     this.handleInputChange = this.handleInputChange.bind(this);
@@ -82,6 +83,7 @@ class UserProfileDialog extends Component {
   }
 
   render() {
+    const { onClose, open = false } = this.props;
     let error = null;
     if (this.state.errorMessage) {
       error = <Error style={{ marginTop: '15px' }}>{this.state.errorMessage}</Error>;
@@ -89,10 +91,10 @@ class UserProfileDialog extends Component {
 
     return (
       <Dialog
-        onClose={this.props.onClose}
+        onClose={onClose}
         aria-labelledby="user-profile-dialog-title"
         PaperComponent={PaperComponent}
-        open={this.props.open}
+        open={open}
         fullWidth
         maxWidth="sm"
       >
@@ -157,7 +159,7 @@ class UserProfileDialog extends Component {
           <Button color="primary" onClick={this.handleSaveUserProfile}>
             Save
           </Button>
-          <Button color="primary" onClick={this.props.onClose}>
+          <Button color="primary" onClick={onClose}>
             Cancel
           </Button>
         </DialogActions>
@@ -176,14 +178,6 @@ UserProfileDialog.propTypes = {
   onSave: PropTypes.func,
 };
 
-UserProfileDialog.defaultProps = {
-  id: null,
-  name: null,
-  affiliation: null,
-  open: false,
-  onSave: null,
-};
-
 UserProfileDialog.contextType = UserContext;
 
 export default UserProfileDialog;
diff --git a/package.json b/package.json
index d8fe3e6a..deb99762 100644
--- a/package.json
+++ b/package.json
@@ -204,7 +204,7 @@
     "opencollective-postinstall": "^2.0.2",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "prettier": "^3.5.3",
-    "react-test-renderer": "18.3.0",
+    "react-test-renderer": "^18.3.0",
     "sass-loader": "^14.2.1",
     "style-loader": "^4.0.0",
     "stylelint": "^16.15.0",
diff --git a/yarn.lock b/yarn.lock
index ae9df84d..5c159d79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10988,7 +10988,7 @@ react-icons@^5.5.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"
   integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.3.0, react-is@^18.3.1:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
@@ -11065,14 +11065,14 @@ react-tagsinput@^3.20.3:
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.20.3.tgz#d5790ccf8a387bdaa8c2c8306e62a7276ac581c1"
   integrity sha512-a+7nZ9gg0SwuoPPmh2AAB98OXYduwi6WgYWgWlPts3mq1ookXGphq9Fe/XLhQcdunkiqJO4WXjWXtHE9UlFyiw==
 
-react-test-renderer@18.3.0:
-  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.0.tgz#579dec2312b9841f7a0cafc1dfbdfdc582be0ea4"
-  integrity sha512-eFnJU8sSYq9I6VI8ISrXDm+7F0igeFlTc0Ngq2XCkVasR5AsyJRg8SuwcD9D5E+VvDS2NrYGZ+gKpO43/wIDHw==
+react-test-renderer@^18.3.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
+  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
   dependencies:
-    react-is "^18.3.0"
+    react-is "^18.3.1"
     react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.1"
+    scheduler "^0.23.2"
 
 react-transition-group@^4.4.5:
   version "4.4.5"
@@ -11487,7 +11487,7 @@ sax@^1.5.0:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.5.0.tgz#b5549b671069b7aa392df55ec7574cf411179eb8"
   integrity sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==
 
-scheduler@^0.23.1, scheduler@^0.23.2:
+scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
   integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
@@ -12076,16 +12076,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12202,14 +12193,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13407,16 +13391,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==