Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react";
import { useState } from "react";
import SkillsModal from "./SkillsModal";

const Skills = ({ userSkills, skillsOptions, userIdEncrypted }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [userSkillsArray, setUserSkillsArray] = useState(userSkills);

  return (
    <>
      <div className="user-profile-ov">
        <h3>
          Habilidades
          <a href="#" title="" className="btn-skills-edit" onClick={() => setIsModalOpen(true)}>
            <i className="fa fa-pencil"></i>
          </a>
        </h3>
        <ul>
          {userSkillsArray.length
            ? userSkillsArray.map(({ name }) =>
              <li key={name}>
                <a href="#" title="">
                  {name}
                </a>
              </li>
            )
            : <li>Sin información</li>
          }
        </ul>
      </div>
      <SkillsModal
        show={isModalOpen}
        closeModal={() => setIsModalOpen(false)}
        userIdEncrypted={userIdEncrypted}
        skillsOptions={skillsOptions}
        userSkillsArray={userSkillsArray}
        setSkills={(newSkills) => setUserSkillsArray(newSkills)}
      />
    </>
  );
};

export default Skills;