Hands-on practice for this lecture. Write the code, see it run, understand the pattern.
Exercise 1 of 1
Live editor: implement a DataSource container that accepts any getData function, then use it to load both server data and localStorage — same component, different sources.
Task
Complete DataSource.js: call getData() in useEffect, store the result, then clone each child and inject { [resourceName]: resource } as props. Then wire up two DataSource uses in App.js: one loading a user object, one reading from localStorage.
💡 Hint: use React.Children.map + React.cloneElement. The same DataSource component works for both the fetch and the localStorage case — only the getData function changes.