Can't insert an array of data into Formik state. One element is set only

Question

I try to add an array of files into "files" property in Formik state,

Formik state:

initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    phoneNumber: '',
                    files: [],
                }}

but always the only one element of the array is set no matter how many files I choose. It is constantly re-recorded with the next one!

Here (src/components/DragAndDrop/DragAndDrop.js) I apply setFieldValue in onDrop function, thus with each iteration each next file is added to Formik state, but it is not. Single file only!?

export const DragAndDrop = ({ name, setFieldValue = f => f, currentFiles }) => {
    const styles = useStyles()

    const onDrop = useCallback(
        acceptedFiles => {
            acceptedFiles.forEach(file => {
                setFieldValue(name, [...currentFiles, file])
            })
        },
        [name, setFieldValue, currentFiles]
    )
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ onDrop })

    return (
        <>
            <div className={styles.fullBlock}>
                <Paper {...getRootProps({ className: 'dropzone' })} className={styles.root}>
                    <input {...getInputProps()} name={name} />
                    <CloudUploadIcon className={styles.icon} />
                    <Typography
                        variant="subtitle1"
                        gutterBottom
                        component="p"
                        className={styles.text}
                    >
                        Drag and drop some files here, or click to select files
                    </Typography>
                </Paper>
            </div>

            <aside className={styles.fullBlock}>
                <List sx={{ width: '100%', maxWidth: '100%' }} className={styles.fullBlock}>
                    {acceptedFiles.map((file, i) => (
                        <ListItem key={i}>
                            <ListItemAvatar>
                                <InsertDriveFileIcon className={styles.iconFile} />
                            </ListItemAvatar>
                            <ListItemText primary={file.path} secondary={file.size} />
                        </ListItem>
                    ))}
                </List>
            </aside>
        </>
    )
}

The component which is upper in the tree

export const Step3 = ({ context }) => {
    const { setFieldValue, values } = context
    console.log(values)
    return (
        <>
            <Title text={'Step 3'} iconRender={<AccountCircleRoundedIcon />} />
            <DragAndDrop name={'files'} setFieldValue={setFieldValue} currentFiles={values.files} />
            <MyButton>Next</MyButton>
        </>
    )
}

and the last one, which is more upper.

export const App = () => {
    const [haveNumber, setHaveNumber] = useState(false)
    return (
        <>
            <Formik
                initialValues={{
                    firstName: '',
                    lastName: '',
                    email: '',
                    phoneNumber: '',
                    files: [],
                }}
                validationSchema={Yup.object({
                    firstName: Yup.string()
                        .max(15, 'Have to be 15 characters or less')
                        .required('Required'),
                    lastName: Yup.string()
                        .max(20, 'Have to be 20 or less characters')
                        .required('Required'),
                    email: Yup.string().required('Required.'),
                    phoneNumber: haveNumber
                        ? Yup.string().phone('UA', false, 'Phone number is invalid')
                        : Yup.string(),
                })}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2))
                        setSubmitting(false)
                    }, 400)
                }}
            >
                {context => (
                    <Form>
                        <MainContainer>
                            {/*<Step1 />*/}
                            {/*<Step2 context={context} setHaveNumber={setHaveNumber} />*/}

                            <Step3 context={context} />

                            {/*<input type="submit" />*/}
                            {/*<input type="file" multiple onInput={() => console.log('file added')} />*/}
                        </MainContainer>
                    </Form>
                )}
            </Formik>
        </>
    )
}

github:https://github.com/AlexKor-5/FormChallenge/tree/ed022501ecd741eb198ab56a693878522f48108a

What is the matter? How to tackle it?

Answer 1

Did you already tried:

const currentFilesCopy = currentFiles.slice(0); // to get a copy of the original array

currentFilesCopy.push(fileThatJustGotUploaded);

setFieldValue(files, currentFilesCopy);