import { useRef } from 'react'

function PersonMaker({addPerson}) {
    const nameRef = useRef();
    const ageRef = useRef();

    function action() {
        const person = {name:nameRef.current.value,age:ageRef.current.value};
        addPerson(person);
    }

    return (
        <>
            <label htmlFor="name">Name:</label>
            <input type="text" name="name" ref={nameRef} />
            <label htmlFor="age">Age:</label>
            <input type="text" name="age" ref={ageRef} />
            <button onClick={action}>Add</button>
        </>
    )
}

export default PersonMaker;