Elep

import React, { useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';

const Question = (props) => {
    let [formValues, setFormValues] = useState({})
    let history = useHistory();
    let params = useParams();
    useEffect(() => {
        // TODO: fetch previous answers
        // console.log({params})
        props.select()
        // const nextQuestion = props.next();
        // fetch(`/test/answers/${nextQuestion-1}`)
        // .then(response => response.json())
        // .then(answers => {
        //     console.log({answers})
        //     if(answers) setFormValues(answers)
        // })
    }, [])
    const handleSubmit = (e) => {
        e.preventDefault()
        console.log({formValues})
        const nextQuestion = props.next();
        fetch(`/test/answers/${nextQuestion-1}`, {credentials: 'same-origin', method: 'POST', body: JSON.stringify(formValues)})
        .then(response => response.json())
        .then(res => {
            console.log(res)
            history.push(`/test/start/${nextQuestion}`)
        })
        
    }
    const handleChange = (e) => {
        setFormValues({
            ...formValues, 
            [e.target.name]: e.target.value
        })
    }
    return (
        <>
            {props.children({...formValues, handleChange: handleChange})}
        </>
    )
}

export default Question