React - Tips to clean up this file?

Hey everyone, I have this file here in my portfolio (React) that I would like to clean up or gather any tips I can. The three major questions I have are:

  1. Should I export the arrays of objects out that have the React-Icons or is it better left in here for modularization / readability? I would throw them in their own skills.js file or something like that, but the value of icon within the object is a React component which needs to be a .jsx file and within the React tree.

  2. The second question is regarding the different buttons and how I am implementing their .active class based on the state which pulls from a custom data- attribute. What would be a better way to implement this? I didn’t want to add another piece of state to keep track of which button is active. I suppose I could do a shared button component, but that really is starting to overcomplicate the whole point of this project. It just seems ugly to me to do a string comparison to test if state is equal to a string? Should I have a variable or function doing this logic instead?

  3. Similar to the second, the red flag for me is I’m doing a string comparison in the setSpecialtyArray function to determine what is going to be mapped in the JSX. It just doesn’t look right to me. And I guess what doesn’t look right is that I have if/else statements, well what if in the future I had other arrays to compare it to? I also suppose I can set another function to map the data outside of the JSX then call that function within the JSX itself? Not sure if that would be more readable or not.

import React, { useState } from 'react';
import {
  DiReact,
  DiSass,
  DiNodejs,
  DiPhp,
  DiPostgresql,
  DiGit,
  DiNpm,
  DiHeroku,
} from 'react-icons/di';
import {
  SiRedux,
  SiGatsby,
  SiNextDotJs,
  SiHtml5,
  SiCss3,
  SiGraphql,
  SiApollographql,
  SiSocketDotIo,
  SiNetlify,
} from 'react-icons/si';

import './SkillsList.css';

const SkillsList = () => {
  const [specialties, setSpecialties] = useState('Front');

  const switchSpecialties = (e) =>
    setSpecialties(e.target.getAttribute('data-val'));

  const frontEndSpecialties = [
    {
      id: 0,
      techName: 'React',
      icon: <DiReact />,
    },
    {
      id: 1,
      techName: 'Redux',
      icon: <SiRedux />,
    },
    {
      id: 2,
      techName: 'Gatsby',
      icon: <SiGatsby />,
    },
    {
      id: 3,
      techName: 'Next',
      icon: <SiNextDotJs />,
    },
    {
      id: 4,
      techName: 'HTML',
      icon: <SiHtml5 />,
    },
    {
      id: 5,
      techName: 'CSS',
      icon: <SiCss3 />,
    },
    {
      id: 6,
      techName: 'Sass',
      icon: <DiSass />,
    },
  ];

  const backEndSpecialties = [
    {
      id: 0,
      techName: 'Node',
      icon: <DiNodejs />,
    },
    {
      id: 1,
      techName: 'PHP',
      icon: <DiPhp />,
    },
    {
      id: 2,
      techName: 'SQL',
      icon: <DiPostgresql />,
    },
    {
      id: 3,
      techName: 'GraphQL',
      icon: <SiGraphql />,
    },
    {
      id: 4,
      techName: 'Apollo',
      icon: <SiApollographql />,
    },
    {
      id: 5,
      techName: 'Socket.io',
      icon: <SiSocketDotIo />,
    },
  ];

  const storageAndDeploymentSpecialties = [
    {
      id: 0,
      techName: 'Github',
      icon: <DiGit />,
    },
    {
      id: 1,
      techName: 'Netlify',
      icon: <SiNetlify />,
    },
    {
      id: 2,
      techName: 'NPM',
      icon: <DiNpm />,
    },
    {
      id: 3,
      techName: 'Heroku',
      icon: <DiHeroku />,
    },
  ];

  const setSpecialtyArray = () => {
    let specialtyArray;

    if (specialties === 'Front') {
      specialtyArray = frontEndSpecialties;
    } else if (specialties === 'Back') {
      specialtyArray = backEndSpecialties;
    } else if (specialties === 'Storage') {
      specialtyArray = storageAndDeploymentSpecialties;
    }

    return specialtyArray;
  };

  return (
    <div className="Skills-List">
      <h2 className="skills-title">Specialties</h2>

      <div className="skills-btn-container">
        <button
          onClick={(e) => switchSpecialties(e)}
          data-val="Front"
          className={specialties === 'Front' ? `active` : ''}
        >
          Front-End Technologies
        </button>

        <button
          onClick={(e) => switchSpecialties(e)}
          data-val="Back"
          className={specialties === 'Back' ? `active` : ''}
        >
          Back-End Technologies
        </button>

        <button
          onClick={(e) => switchSpecialties(e)}
          data-val="Storage"
          className={specialties === 'Storage' ? `active` : ''}
        >
          Storage & Deployment
        </button>
      </div>

      <div className="skills-list">
        {setSpecialtyArray().map((skill) => (
          <div key={skill.id}>
            <div className="skills-icon">{skill.icon}</div>
            <h4 className="skills-name">{skill.techName}</h4>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SkillsList;

Any help is super appreciated! Happy holidays, everyone.

I’ve played with your code a little bit and here is the result, hopefully you’ll find it helpful. I’ll try to answer some of your questions tomorrow and explain what I did and why but now I’m going to sleep :stuck_out_tongue:

2 Likes

Ah geez, you’re the man thank you.

Cool, happy to help :wink: Do you still have some questions or maybe you’ve already found some answers in my demo?

1 Like

Nah man, got it all working, thank you so much! For some reason, maybe I had yet to have coffee then, but I didn’t think of adding the keys to the object and just accessing that via state. Oyyyy