Resume.jsx
import toggleGeneralShow from "./toggleShow/toggleGeneralShow.js";
import toggleWorkShow from "./toggleShow/toggleWorkShow.js";
import toggleSkillShow from "./toggleShow/toggleSkillShow.js";
import ToggleVisibilityIcon from "./toggleShow/ToggleVisibilityIcon.jsx";

return (
        <div className="container">
            <div className="cv-header">
                <h2>Your CV</h2>
            </div>
            <form className="cv-form" onSubmit={jsonFunction}>
                <ToggleVisibilityIcon props={toggleGeneralShow}/>
                <General {...{handleGeneralInputChange}}/>
                <ToggleVisibilityIcon props={toggleWorkShow}/>
                <WorkHistory {...{handleJobInput}} />
                <ToggleVisibilityIcon props={toggleSkillShow}/>
                <AllSkills />
                <br />
                <div className="submit-container">
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    )
example of one of the hide unhide functions
const toggleGeneralShow = () => {
    const generalSection = document.querySelector('[data-is-general]')
    if (generalSection.classList.contains('hidden')) {
        generalSection.classList.remove('hidden');
    } else {
        generalSection.classList.add('hidden');
    }
}

export default toggleGeneralShow;

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
library.add(fas)

toggles the eye and calls the corresponding hide unhide function
const ToggleVisibilityIcon = (props) => {
    const [isClicked, setIsClicked] = useState(false);
    const toggleVisibilityIcon = (e) => {
        e.preventDefault();
        setIsClicked(prev => !prev);
    }
    return (
        <div className="border" >
            <button onClick={(e)=> {
                toggleVisibilityIcon(e);
                props.props(e);
                }} >
                <FontAwesomeIcon icon={isClicked ? "eye-slash" : "eye"} />
            </button>
        </div>
    )
}

export default ToggleVisibilityIcon;