web devolpment task
Budget: $10 – $30 USD
1. In your repository, after using npm to install the above libraries, delete the src directory and copy
the src directory and all of its contents from the fake-proptypes project.
2. Modify this code so that the App.js file has the line <Entries number={3} /> to indicate that your program will produce 3 entries. Note that I should be able to change this to any number between 1 and 10 and it will work with that number of entries. Your modified Entries.js program will take the props (a single number) from App.js and create an array of numbers for it (e.g. for 3, create [1, 2, 3], and for 8, create [1, 2, 3, 4, 5, 6, 7, 8]). The map in the Container in Entries.js should loop over those numbers, passing the number into Entry.js.
3. From here, you need to modify the program to work correctly by having useEffect code in the Entry.js file access data from the placeholder site. In particular, you are to use the /users endpoint, with the number passed into Entry.js indicating which entry from the site to use. Your Entry.js program should display any data from the /users endpoint you wish, but at least one of the fields must be a nested property (e.g. address.street or company.name). For the field I call animals, you may use a hardcoded link to any image, e.g. https://via.placeholder.com/600/ 771796 or some other image of your choice.
4. You must use PropTypes to enforce strong types. When I run your code, I will open the console in Chrome. There cannot be ANY warnings or errors when I run it!
the src directory and all of its contents from the fake-proptypes project.
2. Modify this code so that the App.js file has the line <Entries number={3} /> to indicate that your program will produce 3 entries. Note that I should be able to change this to any number between 1 and 10 and it will work with that number of entries. Your modified Entries.js program will take the props (a single number) from App.js and create an array of numbers for it (e.g. for 3, create [1, 2, 3], and for 8, create [1, 2, 3, 4, 5, 6, 7, 8]). The map in the Container in Entries.js should loop over those numbers, passing the number into Entry.js.
3. From here, you need to modify the program to work correctly by having useEffect code in the Entry.js file access data from the placeholder site. In particular, you are to use the /users endpoint, with the number passed into Entry.js indicating which entry from the site to use. Your Entry.js program should display any data from the /users endpoint you wish, but at least one of the fields must be a nested property (e.g. address.street or company.name). For the field I call animals, you may use a hardcoded link to any image, e.g. https://via.placeholder.com/600/ 771796 or some other image of your choice.
4. You must use PropTypes to enforce strong types. When I run your code, I will open the console in Chrome. There cannot be ANY warnings or errors when I run it!