API Rendering

Have you ever been to an AA meeting? Do you even know what an AA meeting is? It always starts with one of the attendees introducing themselves and stating an issue they are struggling with (anger problems, addiction and the rest). So, it's only fair that I start this -my first ever article by the way- by saying "Hello everyone, my name is Alex and I am a Frontend Engineer".

WHO IS A FRONTEND ENGINEER?

A Frontend Engineer -as defined by indeed.com- builds websites, designs applications and ensures overall user accessibility. It is the development of the graphical user interface of a website through the use of HTML, CSS and JavaScript so that users can view and interact with that website.

One of the most important things a Frontend Engineer must have a good knowledge of is APIs(Application Programming Interface). APIs are mechanisms that enable two software components to communicate with each other.

In my case, I created a school Alumni site as a project for an assignment to be submitted to AltschoolAfrica where I am currently enrolled as a student in their Software Engineering program and I couldn't complete every task required due to work and needing to devote some attention to other projects needing completion at the same time. I applied the randomuser API for three(3)pages which were:

The Frontend
Backend and
Cloud AltSchool Alumni pages.

Cool idea for a router assignment right? Right.

I implemented the random user API as a React Custom Hook, fetched the API data and called the Hook on each page it was required. The problem? The randomuser image data were rendered separately from the names data. All photos were bunched up above every name which was also bunched up. I tried every variation of the code a "newbie" could think of but in Yoda's voice "stuck, I was". I kept getting the error "all adjacent elements must be wrapped in a JSX element." What I did next was something I thought would immediately solve the problem but it didn't. I wrapped the adjacent code which was supposed to render the first and last name of the user in a JSX element. To cut the long story short, both codes rendering the randomuser image and the first and last name had to be in the SAME JSX element as shown below

        {[items.map](http://items.map)((item) =&gt; (

          &lt;p className="api-item"&gt;

            &lt;img src={item.picture.large} alt="user-avi" /&gt;

            {[item.name](http://item.name).first} {[item.name](http://item.name).last}

          &lt;/p&gt;

        ))}

</section>

I felt like I had been staring at my laptop and typing useless codes trying to solve the problem and indeed... that's exactly what happened.

Until next time, this has been another episode of Alex' AA meeting for a Newbie Frontend Software Engineer.

PS: I am currently struggling with Pagination.

API Newbie

Updates I made to my React Router project using randomuser.me.