Filtering a List based on text input

I’m trying to build something in React that filters a list based on what the user types into an input box.

It’s making 2 types of API calls; the first type retrieves a list of items. The second type retrieves info about the user. Sofar I have it displaying the entire list of items, and based on user_id it retrieves info about the user when each item loads.

The problem is I need to filter by user name. And the list of items doesn’t have the user name.

… any suggestion how to do this? I’m flummoxed, I’ve spent about 5 hours trying to figure it out.

Items API call - /all:

{
  "items": [
    {
      "deadline": 1570384257, 
      "description": "Text", 
      "id": "12345678", 
      "name": "Item 12345678", 
      "userId": 0
    }, 
    {
      "deadline": 1570287727, 
      "description": "Text", 
      "id": "98765432", 
      "name": "Item 98765432", 
      "userId": 1
    }
  ]
}

Username API call - /user/3

{
  "user": {
    "bio": "Text", 
    "email": "123@fake.st", 
    "id": 3, 
    "image": "https://www.medicalnewstoday.com/content/images/articles/326/326253/corgi-and-terrier-running.jpg", 
    "name": "John Smith"
  }
}

What are you searching against to display the results? That’s part of the problem. Each time I map out a new item, I make a call to the Users endpoint and grab their data.

Yes, that’s exactly what I’m trying to do! Typing in “Do” would only show items belong to Donald, Doug, Doris, etc.

I’m coding in React so my code is spread over several files ATM. Also I started rearranging things so a lot of it is commented out.

In psuedocode:

App.js

componentDidMount() {
	calls /items endpoint
		saves all itemOrders to state.
			() => {
				items.map(item => {
					calls /user/id endpoint
						itemOrders.userData = [response.data.user]
					})
				}
Passes itemOrders into the ItemOrders component.

ItemOrders.js

render() {
	jsonElements = this.props.itemOrders.map(
		(elem, id) => <ItemComponent itemOrders = {elem} />
	}
render() {
	<>
		jsonElements
	</>
}

–This maps over each itemOrder, and renders a new component.
–I think I need to put a filter here that only renders based on the search text input?

ItemComponent.js

return {
	<article>
		<h2>{itemOrders.name}</h2>
		<p>{itemOrders.description}</h2>
		<p>{itemOrders.userData.name}</p>
		<p>etc...</p>
	</article>
	}

Yes, I only have access to the API endpoints. I can’t modify them.

I figured out the filter, but now I have another problem:

After the second call to the endpoint, I’m trying to add the userData onto state.ItemOrders. This gets passed down to itemComponents, but it’s causing an error.

It says the ItemOrders.userData is undefined in console, & causes a crash if I try to use it. But after the page loads I trigger a console, & the data is really there. For whatever reason, it’s rendering the page before the data arrives.