fixes to the dropdown still needed

[LaishaCalalpa]

No description provided.

[ipc103]

Really cool idea for the search interface. Instead of using an onClick event handler for the option, you want to use an onChange event for the select box itself. https://reactjs.org/docs/events.html#form-events

[ipc103]

Suggested change

	<select>
	<select onChange={(event) => setUserId(event.target.value) }>

The event target in this case will be the option that you just selected, so for the value you can store just the id number instead of 'User ${userId}' to make things easier.

[ipc103]

One other thing to make your life easier - if you had an array of all the ids, you could map over that and render out an option for each one.

const userIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
<select>
  { userIds.map((userId) => <option value={userId}>User {userId}</option>)}
</select>

You could even imagine pulling that array in from somewhere else as well, like the API itself or something. Or, you could use a little trick to build up the array programmatically ( I looked this up on Stack Overflow)

const userIds = Array(12).fill().map((_, i) => i _+ 1); // get an array with a length of 12, fill it with undefined, then map over an use the index to get the value
  

[ipc103]

Hi @LaishaCalalpa - @ROgbonna1 asked me to take a look at your PR. I left a few comments in-line - really nice work, particularly with the search functionality! There was just a small bug, so take another look if you get a chance - it's really cool once it works. Nice job! Feel free to respond to any of the comments if you have questions.

[ipc103]

Totally your call, but I'd probably be more inclined to use one piece of state here called user that is an object with all of the properties that we need. Some people prefer to keep their state more simple/broken out, so it's really just personal preference, but I find it a little easier to read. Also, I'd probably just use a null value as the default state, and then conditionally render a loading message if the user isn't present. This can get a little weird with stuff like the img src, which will just look like a broken link. Something like:

const [user, setUser] = useState(null);

// Later in the promise callback

setUser({
  firstName: res.data.first_name,
  lastName: res.data.last_name,
  avatar: res.data.avatar,
  email: res.data.email
})

// Finally, when rendering 

{ !user ? <p>Loading...</p> : // render the user info }

[ipc103]

👍 to making a named function for this fetching. I think this works well too. You could also define this outside the component entirely and then use a then callback to do the setting of state, but either way works!

[ipc103]

Nice work remembering to include this dependency in the dependency array - this is what makes the re-render possible for your search functionality!