Created a basic User Profile List using an API (React) I'm relatively new when it comes to programming in React and in JavaScript, but have a surface level understanding of what things do. I've created a basic program that fetches user data from an API that generates random users, and appends the users to a list when you click a button. I was wondering if what I'm writing is good enough to be considered for a Jr. React Dev position, and if there's anything I can improve upon the code such as implementation, name convention, readability, efficiency, etc. In particular, in the UserProfile component, I'm mapping through the state that holds the JSON object that was fetched from the API to output the profile picture and name. I'm not sure if there's anyway to do it better, but it doesn't feel quite right to me. Any feed back is much appreciated.
UserProfile.jsx
import React, { useState, useEffect } from &quot;react&quot;;

const UserProfile = () =&gt; {
  const [userData, setUserData] = useState([]);

  const fetchUserData = () =&gt; {
    fetch(&quot;https://randomuser.me/api&quot;)
      .then((resp) =&gt; resp.json())
      .then((data) =&gt; setUserData(data.results));
  };

  //Creates userProfile with picture/full name
  const userProfile = (userMeta) =&gt; {
    const {
      name: { first, last },
      picture: { medium }
    } = userMeta;

    return (
      &lt;&gt;
        &lt;img src={medium} alt=&quot;&quot; /&gt;
        &lt;p&gt;
          {first}, {last}
        &lt;/p&gt;
      &lt;/&gt;
    );
  };

  //Fetch API data on component mount
  useEffect(() =&gt; {
    fetchUserData();
  }, []);

  return (
    &lt;&gt;
      {userData.map((userMeta, idx) =&gt; {
        return &lt;div key={idx}&gt;{userProfile(userMeta)}&lt;/div&gt;;
      })}
    &lt;/&gt;
  );
};

export default UserProfile;

UserList.jsx
import React, { useState } from &quot;react&quot;;
import UserProfile from &quot;./UserProfile&quot;;

const UserList = () =&gt; {
  const [userList, setUserList] = useState([]);

  //Appends UserProfile to List
  const addUser = () =&gt; {
    setUserList((prevState) =&gt; {
      return [...prevState, &lt;UserProfile /&gt;];
    });
  };

  return (
    &lt;div&gt;
      &lt;button onClick={addUser}&gt;Add User&lt;/button&gt;
      {userList.map((user, idx) =&gt; {
        return &lt;React.Fragment key={idx}&gt; {user} &lt;/React.Fragment&gt;;
      })}
    &lt;/div&gt;
  );
};

export default UserList;

App.js
import React from &quot;react&quot;;
import UserList from &quot;./UserList&quot;;

export default function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;p&gt;USER LIST COMPONENT&lt;/p&gt;
      &lt;UserList /&gt;
    &lt;/div&gt;
  );
}
my two cents.

if what I'm writing is good enough to be considered for a Jr. React Dev position

This answer is completely subjective and depends on the company you're applying to. Each company has different expectations.
That being said, here are a list of improvements that I think (from my own personal experience) would make your profile stand out among other candidates for a job position.

Companies want developers with an understanding on the product. Did you simply implement the feature? Or did you go out of your way to think of important situations potential clients might encounter.

i.e.:

When you make API calls, did you use a spinner to let the user know that the list of users is being fetched from you API ?
Did you plan out/work on your design? Did you follow the design system?
Did you implement a global theme?



Avoiding writing pure text in your components, think ahead and start putting them in localized files so that you're one step ahead if the website needs translation.



Don't define a component within a component unless you don't have any other choice (i.e.: UserProfile / userProfile)



UserProfile (singular) returns a list of userProfile's? Doesn't seem right.

I think I would rename UserList --&gt; Users / UserProfile --&gt; UserList / userProfile --&gt; UserProfile


Did you write tests ?