Create a React component for listing heroes.
- Use the given async function to acquire a list of heroes and render them into a list. Heroes have ids, names and wether they are available. If a hero is available, print “Available“. Note to interviewer: Points for figuring out to create a type for heroes upon receiving them and to use keys for rendering a list.
- Create a separate component for hero list items. Note to interviewer: We are interested in wether they can use props.
- Add loading state as a functionality. Note to interviewer: If they cannot figure out a design, advise to show “Loading“ instead of the list while the function is waiting.
- Add error handling as a functionality.
- Create a custom hook for wrapping the fetch functionality.