Merge pull request #1594 from topcoder-platform/PM-226

PM-226 Fix React bad practice: dangerouslySetInnerhtml

Author: himaniraghav3

src/components/ChallengeEditor/ChallengeView/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import cn from 'classnames'
 import { withRouter } from 'react-router-dom'
 import styles from './ChallengeView.module.scss'
-import xss from 'xss'
 import Track from '../../Track'
 import NDAField from '../NDAField'
 import UseSchedulingAPIField from '../UseSchedulingAPIField'
@@ -114,10 +113,7 @@ const ChallengeView = ({
             <div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
                 <span>
-                  <span className={styles.fieldTitle}>Project:</span>
-                  <span dangerouslySetInnerHTML={{
-                    __html: xss(projectDetail ? projectDetail.name : '')
-                  }} />
+                  <span className={styles.fieldTitle}>Project: {projectDetail ? projectDetail.name : ''}</span>
                 </span>
               </div>
               {selectedMilestone &&

src/components/ChallengeEditor/index.js

@@ -8,8 +8,6 @@ import moment from 'moment-timezone'
 import { pick } from 'lodash/fp'
 import { withRouter } from 'react-router-dom'
 import { toastr } from 'react-redux-toastr'
-import xss from 'xss'
-
 import {
   VALIDATION_VALUE_TYPE,
   PRIZE_SETS_TYPE,
@@ -1704,10 +1702,7 @@ class ChallengeEditor extends Component {
             <div className={cn(styles.row, styles.topRow)}>
               <div className={styles.col}>
                 <span>
-                  <span className={styles.fieldTitle}>Project:</span>
-                  <span dangerouslySetInnerHTML={{
-                    __html: xss(projectDetail ? projectDetail.name : '')
-                  }} />
+                  <span className={styles.fieldTitle}>Project: {projectDetail ? projectDetail.name : ''}</span>
                 </span>
               </div>
               <div className={styles.col}>

src/components/ChallengesComponent/index.js

@@ -10,7 +10,6 @@ import { CONNECT_APP_URL, PROJECT_ROLES } from '../../config/constants'
 import { PrimaryButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
 import styles from './ChallengesComponent.module.scss'
-import xss from 'xss'
 import { checkReadOnlyRoles } from '../../util/tc'
 
 const ChallengesComponent = ({
@@ -61,12 +60,9 @@ const ChallengesComponent = ({
       <Helmet title={activeProject ? activeProject.name : ''} />
       {!dashboard && <div className={styles.titleContainer}>
         <div className={styles.titleLinks}>
-          <div
-            className={styles.title}
-            dangerouslySetInnerHTML={{
-              __html: xss(activeProject ? activeProject.name : '')
-            }}
-          />
+          <div className={styles.title}>
+            {activeProject ? activeProject.name : ''}
+          </div>
           {activeProject && activeProject.id && (
             <span>
               (

src/components/ProjectCard/index.js

@@ -2,7 +2,6 @@ import React from 'react'
 import PT from 'prop-types'
 import { Link } from 'react-router-dom'
 import cn from 'classnames'
-import xss from 'xss'
 
 import styles from './ProjectCard.module.scss'
 
@@ -14,7 +13,7 @@ const ProjectCard = ({ projectName, projectId, selected, setActiveProject }) =>
         className={cn(styles.projectName, { [styles.selected]: selected })}
         onClick={() => setActiveProject(parseInt(projectId))}
       >
-        <div className={styles.name} dangerouslySetInnerHTML={{ __html: xss(projectName) }} />
+        <div className={styles.name}>{projectName}</div>
       </Link>
     </div>
   )