nuggets real data

frontend/src/api/JobsPartialDataLayer.jsx

-import React, { Fragment } from 'react';
-import JobCardsWrapper from '../components/CareerCardsTemplates/JobCardsWrapper';
-import { strapiApiBuilder } from '../utils/strapiApiBuilder';
-import useDataApi from '../hooks/useDataApi';
-
-const api_url = process.env.REACT_APP_API_URL;
-
-const strapiPopulate = [];
-
-const JobsPartialDataLayer = ({ children }) => {
-  const strapi = strapiApiBuilder('jobs', strapiPopulate, '');
-
-  const [{ data, isLoading, isError }, doFetch] = useDataApi(strapi);
-
-  console.log(data);
-
-  return <Fragment>{data => <Fragment data={data}>{children}</Fragment>}</Fragment>;
-};
-
-export default JobsPartialDataLayer;

frontend/src/components/shared/HashPositions.jsx

 import { RadioGroup } from '@headlessui/react';
 import propTypes from 'prop-types';
 
-const _data = {
-  job: [
-    {
-      id: 1,
-      position: '.Net',
-    },
-    {
-      id: 2,
-      position: 'Legal',
-    },
-  ],
-};
 
 export default function HashPositions(props) {
-  //console.log(props.selectedPosition);
   function handleChange(event) {
     props.setSelectedPosition(event.target.value)
   }
         Select Position
       </RadioGroup.Label>
       <div className="mt-1 mb-4 flex flex-row items-center justify-start">
-        {_data.job.map(job => (
-          <RadioGroup.Option key={job.id} value={job.position}>
+        {props.data.map(job => (
+          <RadioGroup.Option key={job.id} value={job.attributes.tag}>
             {({ checked }) => (
               <span
                 onClick={() => {
                     : 'transition-all px-3 mr-2 text-sm hover:cursor-pointer hover:bg-opacity-100 bg-opacity-50 py-1 bg-dg-primary-900 text-white rounded-lg hover:transition-all'
                 }
               >
-                {'#' + job.position}
+                {'#' + job.attributes.tag}
               </span>
             )}
           </RadioGroup.Option>
         ))}
 
-        <RadioGroup.Option value="#Other">
+        <RadioGroup.Option value="#other">
           {({ checked }) => (
             <span
               onClick={() => {
                   : 'transition-all px-3 text-sm hover:cursor-pointer hover:bg-opacity-100 bg-opacity-50 py-1 bg-dg-primary-900 text-white rounded-lg hover:transition-all'
               }
             >
-              #Other
+              #other
             </span>
           )}
         </RadioGroup.Option>

frontend/src/components/shared/JobForm.jsx

 import ReCAPTCHA from 'react-google-recaptcha';
 import axios from 'axios';
 import { UIContext } from '../../context/UIContextProvider';
+import { strapiApiBuilder } from '../../utils/strapiApiBuilder';
+import useFetchCollections from '../../hooks/useFetchCollections';
 
 const api_url = process.env.REACT_APP_API_URL;
 
+const strapiPopulate = [];
+
 export default function JobForm(props) {
   const [btnText, setBtnText] = useState('');
   const [sucMsg, setSucMsg] = useState(false);
   const [errorMsgPosition, setErrorMsgPosition] = useState('');
   const fileInput = useRef();
 
+  const strapi = strapiApiBuilder('jobs', strapiPopulate, '');
+
+  const [{ data, isLoading, isError }, doFetch] = useFetchCollections(strapi);
+
   function changeFormHandler(event) {
     const { name, value } = event.target;
     setJobForm(prevState => ({
 
   function hashToFormData(selected, other) {
     setJobForm(prevState => ({
-        ...prevState,
-        position: selected,
-        other: other,
+      ...prevState,
+      position: selected,
+      other: other,
     }));
   }
 
       ...prevState,
       position: selectedPosition,
     }));
-  },[selectedPosition])
+  }, [selectedPosition]);
 
   useEffect(() => {
     setBtnText(props.cta);
                           </div>
                         </div>
                         {/* <RadioBoxesGroup/> */}
-                        <HashPositions
-                          changeFormHandler={changeFormHandler}
-                          cntCareers={cntCareersJobs}
-                          otherInputState={otherInputState}
-                          hashToFormData={hashToFormData}
-                          setOtherInputState={setOtherInputState}
-                          defaultPositionSelection={defaultPositionSelection}
-                          selectedPosition={selectedPosition}
-                          setSelectedPosition={setSelectedPosition}
-                        />
+                        {data && (
+                          <HashPositions
+                            changeFormHandler={changeFormHandler}
+                            data={data}
+                            otherInputState={otherInputState}
+                            hashToFormData={hashToFormData}
+                            setOtherInputState={setOtherInputState}
+                            defaultPositionSelection={defaultPositionSelection}
+                            selectedPosition={selectedPosition}
+                            setSelectedPosition={setSelectedPosition}
+                          />
+                        )}
+
                         <div className="py-1">
                           <label
                             htmlFor="first-name"