Not able to set initial values of formik form? - reactjs

Question

I have created a formik form that gets its initial values from the backend database through API calls. Got below error:
Type 'undefined' is not assignable to type 'FormikValues'. TS2322
Not able to resolve the error.
code:
// #ts-ignore
import React, { useState, useEffect } from 'react';
import { Formik, Form, Field } from 'formik';
import {
Typography,
Button,
Grid,
CircularProgress,
Divider,
} from '#material-ui/core';
import * as Yup from 'yup';
import { MyInput } from './comman/MyInput';
import axios from 'axios'
import ThumbUpAltIcon from '#material-ui/icons/ThumbUpAlt';
import Unsubscribed from './Unsubscribed';
const contactSchema = Yup.object().shape({
});
export default function SurveyUnsubscribed(props: any) {
const [isSubmitted, setIsSubmitted] = useState(false);
//const [color, setColor] = useState(true);
const [loading, setLoading] = useState(false);
const [count, setCount] = useState(0);
const [countone, setCountOne] = useState(0);
const [counttwo, setCountTwo] = useState(0);
const [countthree, setCountThree] = useState(0);
const [initialValues, setInitialValues] = useState();
const [state, setState] = useState({
msg: '',
});
let initial:any;
async function getInitialValues() {
try{
const response = await axios.get(`${process.env.REACT_APP_LOCALHOST_DEVELOPMENT_VOTING_API_GET}`)
return response.data;
}catch(error){
console.error(error)
}
}
useEffect(() => {
getInitialValues().then((res:any) => setInitialValues(res));
}, []);
const handleClickCount = () => {
setCount(count + 1);
// setColor(false);
};
const handleClickCountTwo = () => {
setCountTwo(counttwo + 1);
// setColor(false);
}; const handleClickCountThree = () => {
setCountThree(countthree + 1);
// setColor(false);
}; const handleClickCountOne = () => {
setCountOne(countone + 1);
// setColor(false);
};
return (
<React.Fragment>
<Formik
enableReinitialize
initialValues={initialValues}
// count: initial,
// countone: countone,
// counttwo: counttwo,
// countthree: countthree,
// helptext: '',
validationSchema={contactSchema}
onSubmit={(values, { resetForm }) => {
setLoading(true);
console.log(initial)
const data = {
count: values.count,
countone: values.countone,
counttwo: values.counttwo,
countthree: values.countthree,
helptext: values.helptext,
};
console.log(data);
const request = new Request(
`${process.env.REACT_APP_LOCALHOST_DEVELOPMENT_VOTING_API}`,
{
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
}),
body: JSON.stringify(data),
},
);
fetch(request)
.then((res) => res.json())
.then((data) => {
if (data.message === 'Thank you for your feedback!') {
setState({
msg: data.message,
});
setIsSubmitted(true);
setTimeout(() => {
setLoading(false);
}, 1500);
} else {
console.log('error');
}
});
setTimeout(() => {
setIsSubmitted(false);
}, 1500);
resetForm();
}}
>
{({ setFieldValue }) => (
<Grid container>
<Grid
item
xs={12}
style={{ paddingLeft: '2em', paddingRight: '2em' }}
>
<Typography
variant="h6"
style={{
marginTop: '1em',
color: '#2F4858',
fontWeight: 'bold',
}}
>
Voting survey </Typography>
<br />
{isSubmitted}
<Form>
<Typography
variant="body1"
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '1em',
}}
>
<Field type="hidden" name="count" component={ThumbUpAltIcon} onClick={handleClickCount} style={{ color: '#C4C4C4', marginRight: '0.4em' }}/>
<Typography
variant="caption"
style={{
position: 'relative',
top: '1.5em',
right: '1.5em',
}}
>
{count}
</Typography>
A </Typography>
<Typography
variant="body1"
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '1em',
}}
>
<Field type="hidden" name="countone" component={ThumbUpAltIcon} onClick={handleClickCountOne} style={{ color: '#C4C4C4', marginRight: '0.4em' }}/>
<Typography
variant="caption"
style={{
position: 'relative',
top: '1.5em',
right: '1.5em',
}}
>
{countone}
</Typography>
B </Typography>
<Typography
variant="body1"
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '1em',
}}
>
<Field type="hidden" name="counttwo" component={ThumbUpAltIcon} onClick={handleClickCountTwo} style={{ color: '#C4C4C4', marginRight: '0.4em' }}/>
<Typography
variant="caption"
style={{
position: 'relative',
top: '1.5em',
right: '1.5em',
}}
>
{counttwo}
</Typography>
C </Typography>
<Typography
variant="body1"
style={{
display: 'flex',
alignItems: 'center',
marginBottom: '1em',
}}
>
<Field type="hidden" name="countthree" component={ThumbUpAltIcon} onClick={handleClickCountThree} style={{ color: '#C4C4C4', marginRight: '0.4em' }}
/>
<Typography
variant="caption"
style={{
position: 'relative',
top: '1.5em',
right: '1.5em',
}}
>
{countthree}
</Typography>
D
</Typography>
<br />
<Typography
variant="h6"
style={{
marginLeft: '2em',
marginTop: '0.5em',
}}
>
What information would help you ?
</Typography>
<Field
id="outlined-multiline-flexible"
type="text"
name="helptext"
component={MyInput}
disabled={isSubmitted}
style={{ marginLeft: '2em' }}
/>
<br />
<br />
<Button
type="submit"
variant="contained"
style={{
background: '#2F4858',
color: 'white',
fontFamily: 'roboto',
fontSize: '1rem',
marginLeft: '2em',
marginBottom: '1em',
}}
>
{loading && (
<CircularProgress
size={25}
color="inherit"
style={{ marginRight: '5px' }}
/>
)}
{loading && <span>submitting</span>}
{!loading && <span>Submit</span>}
</Button>
<br />
{state.msg && (
<Typography
variant="h6"
style={{
color: '#4BB543',
fontFamily: 'roboto-medium',
marginTop: '1em',
}}
>
{' '}
{state.msg}{' '}
</Typography>
)}
</Form>
<Divider
style={{
border: '1px solid #97A1A8',
marginTop: '1em',
marginBottom: '2em',
}}
/>
<Unsubscribed />
</Grid>
</Grid>
)}
</Formik>
</React.Fragment>
);
}
please guys help me with setting formik initial values from the database(Postgresql)

Answer 1

Because you create state initialValues with default value is undefined. So just update default value to an empty object
const [initialValues, setInitialValues] = useState({});