Skip to content
Snippets Groups Projects
Select Git revision
  • 59a86d5e10129016e9922fbe3fb9b51fe2a7471e
  • main default protected
  • v5.2
  • v5.1
  • v7.1
  • v7
  • v6.2
  • v6.1
  • v6
  • v5.9
  • v5.8
  • v5.7
  • v5.6
  • v5.5
  • v5
  • v5.3
  • v4.6
  • v4.6-problem
  • v4.5
  • v4
  • v3.2
  • v3.1
22 results

app.component.jsx

Blame
  • app.component.jsx 1.56 KiB
    import { useState, useEffect } from 'react';
    
    import '../assets/style/app.css';
    
    import PersonListingController from './personListingController.component.jsx';
    import PersonListingData from './personListingData.component.jsx';
    
    import { mockFetch } from '../util/mockAPI.js';
    
    const App = () => {
    
        const [persons, setPersons ] = useState([]);
    
        const fetchData = async () => {
            const data = await mockFetch('http://source.of.data/persons',10);
            setPersons( data );
        }      
    
        useEffect( () => {
        fetchData();            
        }, []);
    
        /* increment age of person with given id, state is updated */
        const incrementAge = (personId) => {
            setPersons ( previousPersons => {
                                                const olderPerson = previousPersons.find( person => person.id === personId );
                                                olderPerson.age = olderPerson.age + 1;
                                                return [...previousPersons];
                                            });
        }
    
        const addPerson = person => {
            const newId = `A${persons.length + 1}`;
            const newPerson = { ...person, id: newId };
            setPersons(previousPersons => [...previousPersons, newPerson] );
        }
    
        return(
            <div id="app">
                <PersonListingController
                    persons = { persons }
                    incrementAge = { incrementAge }
                    addPerson = { addPerson }
                />
                <PersonListingData
                    persons = { persons }
                />
            </div>
        );
    }
    
    export default App;