fix: issue topcoder-archive#36

Author: yoution

src/components/SkillsList/index.jsx

@@ -16,8 +16,6 @@ const SkillsList = ({requiredSkills, skills, limit = 3 }) => {
   const skillsToShow = skills.slice(0, limit);
   const skillsToHide = skills.slice(limit);
 
-  // if has requiredSkills, show two columns, eles show only one column
-  const showMatches = !!requiredSkills
   const [isOpen, setIsOpen] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
@@ -106,12 +104,11 @@ const SkillsList = ({requiredSkills, skills, limit = 3 }) => {
                       <ul styleName="skills-list">
                         {requiredSkills.map((skill) => (
                           <li key={skill.id}>
-                            {showMatches &&
-                              (_.find(skills, { id: skill.id }) ? (
+                            {_.find(skills, { id: skill.id }) ? (
                                 <IconCheck />
                               ) : (
                                 <IconCross />
-                              ))}{" "}
+                              )}{" "}
                             {skill.name}
                           </li>
                         ))}
@@ -120,7 +117,7 @@ const SkillsList = ({requiredSkills, skills, limit = 3 }) => {
                   )}
                   {otherSkills && (
                     <div styleName="skills-section">
-                      <div styleName="skills-title">{showMatches ? 'Other User Skills': 'Required Skills'}</div>
+                      <div styleName="skills-title">{!!requiredSkills ? 'Other User Skills': 'Required Skills'}</div>
                       <ul styleName="skills-list">
                         {otherSkills.map((skill) => (
                           <li key={skill.id}>{skill.name}</li>