{"id":23909864,"url":"https://github.com/nrcool/react-life-cycle","last_synced_at":"2026-06-23T09:31:30.051Z","repository":{"id":99027095,"uuid":"288172529","full_name":"nrcool/react-life-cycle","owner":"nrcool","description":null,"archived":false,"fork":false,"pushed_at":"2020-08-17T12:19:58.000Z","size":349,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T23:02:34.275Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nrcool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-17T12:19:35.000Z","updated_at":"2020-08-17T12:20:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"9cb7f6f0-4d2b-4818-9757-8a10c8f2d720","html_url":"https://github.com/nrcool/react-life-cycle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nrcool/react-life-cycle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrcool%2Freact-life-cycle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrcool%2Freact-life-cycle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrcool%2Freact-life-cycle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrcool%2Freact-life-cycle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nrcool","download_url":"https://codeload.github.com/nrcool/react-life-cycle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrcool%2Freact-life-cycle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34684671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-05T06:33:48.099Z","updated_at":"2026-06-23T09:31:30.046Z","avatar_url":"https://github.com/nrcool.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Task 1: Layout\n\n1. Create the following layout in the App-component. Do not create any other components yet\n![task 1 reference image](reference-images/task1.jpg)\n\n\n# Task 2: Component Structure\n\n1. Create the stateless Header-component, to which you source out the header part of your layout.\n2. Create the stateful SearchResults-component, to which you source out the table.\n![task 2 reference image](reference-images/task2.jpg)\n\n\n# Task 3: Adding State \u0026 User component\n\n1. In the SearchResults-component‘s state,Use fetch to get data from API ([jsonplaceholder API link](https://jsonplaceholder.typicode.com/users)) and add receieved data into an array “users“ which should contain all of the user data shown in the table.\n2. Create a stateless component “User“ which receives three props: id, name and email. User should return JSX of one table-row (tr) that consists of three table-cells (td). For id, name and email.\n3. Inside SearchResult‘s table, render User-components instead of table-rows (tr). Therefore, use the state‘s users-Array and the Array.map method.\n\n![task 3 reference image](reference-images/task3.jpg)\n\n# Task 4: Adding Search Function\n\n1. In the App-component‘s state, add a variable searchTerm. Add an onChange event for the searchbox and update  searchTerm whenever the textbox changes.\n2. Add an onClick-event for the “Search“-button. When the button is clicked, lastSearchTerm will be set to searchTerm.\n3. Pass lastSearchTerm as props down to the SearchResults-component. Name it “searchFor“.\n4. Inside the SearchResults-component, filter the users-Array to the users where the name or email includes the incoming lastSearchTerm as substring. I.e. If the lastSearchTerm is „joh“ then only the users John Smith,Kyra Johnson and Mike Johnson will be shown.\n\n\n### Adding State \u0026 User component\n![task 4 reference image](reference-images/task4.jpg)\n\n# Task 5: Only search again, if the searchterm differs\n\nThe goal of this task is to minimize the number of searches. Therefore, you only re-\nrender the SearchResults component if the new searchFor-prop is different from the\nlast one.\n\n1. Do some research (Google) on the component-lifecycle method\n    shouldComponentUpdate(nextProps) and try to become confident with it.\n    **As a summary:** if you put it into your component, you decide when to re-render\n    or not re-render. React will call your implementation of\n    shouldComponentUpdate(nextProps).\n2. Put the declaration of shouldComponentUpdate(nextProps) into your\n    SearchResults-component. Take a closer look at the parameter nextProps (i.e.\n    Use the debugger or console.log it out).\n3. In your SearchResults-component, create a new class-member variable\n    lastSearchTerm which is initially set to an empty string ‘‘. Whenever a new\n    searchTerm is passed to SearchResults, update lastSearchTerm and re-render.\n    Whenever it is equal to the old one, do not re-render. Eventually, render your\n    table-output based on your class-member variable lastSearchTerm.\n\n\n# Task 6: Adding a navigation without React-Router\n\n1. In your Header-component, add the following two span-elements containing “Search“ and “About“.\n![task 6 reference image](reference-images/task6.1.jpg)\n2. Create a new stateless component “About“ which only shows one horizontally centered div displaying.\n\n3. Inside the App-component‘s state, create the variable “currentPage“ that is initially set to “search“.\n4. Implement the following conditional-rendering: whenever currentPage is set to “search“, the SearchResults- component will be shown. Whenever it is set to “about“, the About-component will be shown. Test it by setting currentPage to “about“ and reload the page: now only the About-component is shown.\n\n### A: When your App-component‘s state variable “currentPage“ is set to **“about“** , this should be the output:\n![task 6 reference image](reference-images/task6.jpg)\n\n### B: When your App-component‘s state variable “currentPage“ is set to **“search“,** this should be the output:\n![task 6 reference image](reference-images/task6.1.jpg)\n\n\n5. In the App-component, create a method navigate(page) that changes the currentPage\n    to page.\n6. Pass the App‘s navigate-method down to the Header-component as prop\n    “navigationHandler“.\n7. Inside the Header, add onClick-events that call the navigationHandler-reference with\n    either “search“ or “about“.\n8. Test it. When you can click “Search“ and you see the SearchResults-component or you\n    click “About“ and you see the About-component, it worked.\n9. Inside SearchResults, implement the method componentDidMount(). Inside, print out\n    to the console “The SearchResult-component has mounted.“\n10. Again inside SearchResults, implement the method componentWillUnmount. Inside,\n    print out to the console “The SearchResults-component will unmount“.\n11. Test your web-app now. When you click on “Search“ and then on “About“, what do you\n    see in the console? How can you explain this output?\n\n# Task 7 (Advanced): FETCH \n### When the SearchResults-component mounts,load the user-data from\n\n[jsonplaceholder API link](https://jsonplaceholder.typicode.com/users)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnrcool%2Freact-life-cycle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnrcool%2Freact-life-cycle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnrcool%2Freact-life-cycle/lists"}