How to customize formik handleChange - reactjs

Question

Hi I am trying to build a handleChange method that will not only change the value of a dropdown but also dispatch a redux action which we need. Unfortunately the form is built with formik so formik.handleChange is being used. Below Im attaching two code snippets -- a parent component from which the formik value is coming and a child component where its being used.
Parent Component
/* eslint-disable no-nested-ternary */
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Grid, Typography, IconButton } from '#mui/material';
import DoNotDisturbIcon from '#mui/icons-material/DoNotDisturb';
import * as Yup from 'yup';
import { useTranslation } from 'react-i18next';
import { useFormik } from 'formik';
import { useDispatch, useSelector } from 'react-redux';
import { NavigateRoutes } from '../../../constant';
import SwapCourseLocation from '../../admin-user/swap-course-location';
import { DialogAtom } from '../../../components/atoms';
import { getFormattedDate } from '../../../utils/methods';
import styles from './style';
import useStyles from '../../../custom-hooks/useStyles';
import Loader from '../../../components/atoms/loader';
import DataGridProTable from '../../../components/atoms/data-grid-pro';
import { Student, SwapCourse } from './helper';
import StudentHeader from './header';
import { SwapCourseDialogFooter } from '../../admin-user/students/helper';
import { SwapIcon, MailIcon } from '../../../assets/svg';
// import { getAllCourseService } from '../../../store/services/auth';
import Constant from '../../../store/constant';
import useLocationCoordinator from '../../../custom-hooks/useLocationCoordinator';
import { setLocalStorage } from '../../../utils/localStorageMethod';
import CommonProfileImage from '../../../components/molecules/common/CommonProfileImage';
import useStudent from '../../../custom-hooks/useStudent';
// import useStudent from '../../../custom-hooks/useStudent';
export default function StudentList({
setDialogOpen,
setLoading,
refreshList,
loading,
visibleFields,
fileHeaders,
// marksOpen,
setCourseData,
courseData,
setOpenDialog,
}) {
const classes = useStyles(styles)();
const { t } = useTranslation();
const [selectedRows, setSelectedRows] = React.useState([]);
const validationSchema = Yup.object({});
const coordinatorInfo = useLocationCoordinator();
const students = coordinatorInfo?.students;
const assignedLocations = coordinatorInfo?.assignedLocations;
const assignedYears = coordinatorInfo?.assignedYears;
const [rowData, setRowData] = useState([]);
const [studentData, setStudentData] = useState([]);
const [gridLoading, setGridLoading] = useState(true);
const [locations, setLocationData] = useState([]);
const [years, setYearsData] = useState([]);
const [fileName, setFileName] = useState(false);
const [error, setError] = useState('');
const [customForm, setCustomForm] = useState('');
const [isSwapCourseDialog, setSwapCourseOrLocation] = useState(false);
const locationCoordinatorData = useSelector((state) => state?.getLocationCoordinator);
const selectedYearRedux = locationCoordinatorData?.selectedYear;
const selectedLocationRedux = locationCoordinatorData?.selectedLocations;
const [swapCourseLocationInfo, setCourseLocationInfo] = useState({
studentId: '',
studentName: '',
acedemicYear: '',
courseFrom: '',
courseTo: '',
locationFrom: '',
locationTo: '',
sectionFrom: '',
sectionTo: '',
changeLogs: '',
});
const [disableMovestudent, setDisableMovestudent] = useState(true);
const studentInfo = useStudent();
const dispatch = useDispatch();
const navigate = useNavigate();
// useEffect(() => {
// console.log(selectedLocationRedux?.value);
// }, [selectedLocationRedux]);
const formik = useFormik({
initialValues: {
academicYear: years[0]?.id,
locationId: locations[0]?.id,
courseId: courseData[0]?.id,
},
validationSchema,
onSubmit: () => {
setLoading(true);
},
});
useEffect(() => {
setLocalStorage('locationDashboard', false);
setStudentData(students);
}, [students]);
useEffect(() => {
return () => {
setStudentData([]);
setRowData([]);
};
}, []);
useEffect(() => {
setLocationData(assignedLocations);
setYearsData(assignedYears);
if (selectedLocationRedux?.value) {
formik.setFieldValue('locationId', selectedLocationRedux?.value);
} else {
formik.setFieldValue('locationId', assignedLocations[0]?.id);
}
const currentYear = new Date().getFullYear();
const selectedYear = assignedYears.filter((opt) => opt?.id.substring(0, 4) === currentYear.toString());
if (selectedYearRedux?.id) {
formik.setFieldValue('academicYear', selectedYearRedux?.id);
} else {
formik.setFieldValue('academicYear', selectedYear[0]?.id);
}
// formik.setFieldValue('academicYear', selectedYear[0]?.id);
}, [assignedLocations, assignedYears]);
useEffect(() => {
setCourseData(studentInfo?.courses);
}, [studentInfo?.courses]);
useEffect(() => {
setError('');
setGridLoading(true);
setSelectedRows([]);
const locData = assignedLocations?.filter(
(i) => i?.id === formik.values.locationId,
);
const date = getFormattedDate(new Date());
const file = `${locData[0]?.name}-${formik.values.academicYear}-${date}`;
setFileName(file);
const payload = {
locationId: formik?.values?.locationId,
academicYear: formik?.values?.academicYear,
courseId: formik?.values?.courseId,
};
if (payload?.locationId && payload?.academicYear && payload?.courseId && formik?.values?.courseId?.[0] !== undefined) {
refreshList(payload);
}
}, [
formik?.values?.locationId,
formik?.values?.academicYear,
formik?.values?.courseId,
]);
useEffect(() => {
const data = new Student(studentData);
setRowData(data);
setGridLoading(loading);
}, [studentData]);
const getMarksHeader = () => (
<div>
<span style={{ height: '5vh' }}>
{t('MARKS')}
</span>
<div>{t('Q2')}</div>
</div>
);
// const getBonusHeader = () => (
// <div>
// <span>
// {t('BONUS_MARKS')}
// </span>
// {/* <div>{t('Marks')}</div> */}
// </div>
// );
const getNewReturningHeader = () => (
<div>
<span style={{ height: '5vh' }}>
{t('New / ')}
</span>
<div>{t('Returning')}</div>
</div>
);
const getHomeworkHeader = () => (
<div>
<span style={{ height: '5vh', left: -14 }}>
{t('HOMEWORK')}
</span>
<div>{t('Q2')}</div>
</div>
);
const viewLogs = (onClose) => {
onClose(false);
navigate(NavigateRoutes.STUDENTS_LOGS);
};
const handleMoveStudent = () => {
customForm.handleSubmit();
};
const refreshStudentData = () => {
setLoading(true);
const payload = {
locationId: formik?.values?.locationId,
academicYear: formik?.values?.academicYear,
courseId: formik?.values?.courseId,
};
// setTimeout(() => {
refreshList(payload);
// }, 1000);
};
const swapCourseDialogFooter = (
<SwapCourseDialogFooter
classes={classes}
t={t}
primaryHandle={handleMoveStudent}
secHandle={() => setSwapCourseOrLocation(false)}
viewLogs={viewLogs}
disableMovestudent={disableMovestudent}
/>
);
const isChangeLogVisible = false;
const swapCourseLocation = (
<SwapCourseLocation
refreshStudentsData={refreshStudentData}
{...{
setCourseLocationInfo,
swapCourseLocationInfo,
setCustomForm,
setSwapCourseOrLocation,
courseData,
isChangeLogVisible,
setDisableMovestudent,
}}
/>
);
const [columns, setColumns] = useState();
useEffect(() => {
const columnsData = [
{
field: 'profilePhoto',
headerName: t('PICTURES'),
sortable: false,
hide: !visibleFields?.includes(t('PICTURES')),
renderCell: (rowInfo) => (
<CommonProfileImage
key={rowInfo?.id}
src={rowInfo?.row?.studentInfo?.profilePhoto}
/>
),
headerClassName: 'pictureHeader',
cellClassName: 'pictureCell',
},
{
field: 'studentName',
headerName: t('STUDENT_NAME'),
hide: !visibleFields?.includes(t('STUDENT_NAME')),
align: 'left',
headerClassName: 'studentNameHeader',
cellClassName: 'studentNameCell',
},
{
field: 'parentName',
headerName: t('PARENT_NAME'),
hide: !visibleFields?.includes(t('PARENT_NAME')),
align: 'left',
headerClassName: 'commonHeader',
cellClassName: 'commonCell',
},
{
field: 'phoneNumber',
hide: !visibleFields?.includes(t('CONTACT_NO')),
headerName: t('CONTACT_NO'),
align: 'left',
headerClassName: 'phoneNumberHeader',
cellClassName: 'phoneNumberCell',
},
{
field: 'course',
hide: !visibleFields?.includes(t('COURSE')),
headerName: t('COURSE'),
align: 'left',
headerClassName: 'courseHeader',
cellClassName: 'courseCell',
},
{
field: 'section',
hide: !visibleFields?.includes(t('SECTION')),
headerName: t('SECTION'),
align: 'left',
headerClassName: 'courseHeader',
cellClassName: 'courseCell',
},
{
field: 'newReturning',
hide: !visibleFields?.includes(t('NEW_RETURNING')),
headerName: getNewReturningHeader(),
align: 'left',
headerClassName: 'newReturningHeader',
cellClassName: 'newReturningCell',
},
{
field: 'marksQ1',
disableColumnResize: 'false',
hide: !visibleFields?.includes(t('MARKS')),
sortable: false,
headerName: t('Q1'),
align: 'center',
headerClassName: 'marksHeader',
cellClassName: 'marksCell',
renderCell: (cellValues) => (
<span
className={cellValues?.row?.marksQ1 >= cellValues?.row?.Q1PassingCriteria ? classes.marksGreen
: cellValues?.row?.marksQ1 < (parseInt(cellValues?.row?.Q1PassingCriteria, 10) - 10) ? classes.marksRed
: cellValues?.row?.marksQ1 >= (parseInt(cellValues?.row?.Q1PassingCriteria, 10) - 10) ? classes.marksYellow : classes.marksGrey}
onClick={(e) => setOpenDialog(e, cellValues, 'marks', 'Q1')}
>
{cellValues?.row?.Q1PassingCriteria ? Number.isInteger(cellValues?.row?.marksQ1) ? cellValues?.row?.marksQ1 : Number(cellValues?.row?.marksQ1).toFixed(2) : '-'}
{cellValues?.row?.Q1PassingCriteria && !cellValues?.row?.Q1Attended ? '(A)' : ''}
</span>
),
},
{
field: 'marksQ2',
hide: !visibleFields?.includes(t('MARKS')),
headerName: getMarksHeader(),
disableColumnResize: 'false',
align: 'left',
headerClassName: 'marksHeaderSpan',
cellClassName: 'marksQ3Cell',
sortable: false,
renderCell: (cellValues) => (
<span
className={cellValues?.row?.marksQ2 >= cellValues?.row?.Q2PassingCriteria ? classes.marksGreen
: cellValues?.row?.marksQ2 < (parseInt(cellValues?.row?.Q2PassingCriteria, 10) - 10)
? classes.marksRed : cellValues?.row?.marksQ2 >= (parseInt(cellValues?.row?.Q2PassingCriteria, 10) - 10) ? classes.marksYellow : classes.marksGrey}
onClick={(e) => setOpenDialog(e, cellValues, 'marks', 'Q2')}
>
{cellValues?.row?.Q2PassingCriteria
? Number.isInteger(cellValues?.row?.marksQ2) ? cellValues?.row?.marksQ2 : Number(cellValues?.row?.marksQ2).toFixed(2) : '-'}
{cellValues?.row?.Q2PassingCriteria && !cellValues?.row?.Q2Attended ? '(A)' : ''}
</span>
),
},
{
field: 'marksQ3',
hide: !visibleFields?.includes(t('MARKS')),
headerName: t('Q3'),
headerClassName: 'marksQ3Header',
cellClassName: 'marksQ3Cell',
sortable: false,
renderCell: (cellValues) => (
<span
className={cellValues?.row?.marksQ3 >= cellValues?.row?.Q3PassingCriteria ? classes.marksGreen
: cellValues?.row?.marksQ3 < (parseInt(cellValues?.row?.Q3PassingCriteria, 10) - 10)
? classes.marksRed : cellValues?.row?.marksQ3 >= (parseInt(cellValues?.row?.Q3PassingCriteria, 10) - 10) ? classes.marksYellow : classes.marksGrey}
onClick={(e) => setOpenDialog(e, cellValues, 'marks', 'Q3')}
>
{cellValues?.row?.Q3PassingCriteria
? Number.isInteger(cellValues?.row?.marksQ3) ? cellValues?.row?.marksQ3 : Number(cellValues?.row?.marksQ3).toFixed(2) : '-'}
{cellValues?.row?.Q3PassingCriteria && !cellValues?.row?.Q3Attended ? '(A)' : ''}
</span>
),
},
{
field: 'homeworkQ1',
hide: !visibleFields?.includes(t('HOMEWORK')),
headerName: t('Q1'),
align: 'center',
headerClassName: 'marksHeader',
cellClassName: 'marksCell',
sortable: false,
renderCell: (cellValues) => (
<span
className={cellValues?.row?.Q1HomeWorkWeightage
? classes.homeworkColor : classes.marksGrey}
onClick={(e) => setOpenDialog(e, cellValues, 'homework-marks', 'Q1')}
>
{cellValues?.row?.Q1HomeWorkWeightage
? Number.isInteger(cellValues?.row?.homeworkQ1) ? cellValues?.row?.homeworkQ1 : Number(cellValues?.row?.homeworkQ1).toFixed(2) : '-'}
</span>
),
},
{
field: 'homeworkQ2',
hide: !visibleFields?.includes(t('HOMEWORK')),
headerName: getHomeworkHeader(),
align: 'left',
headerClassName: 'homeworkHeaderSpan',
cellClassName: 'marksQ3Cell',
sortable: false,
renderCell: (cellValues) => (
<span
className={cellValues?.row?.Q2HomeWorkWeightage
? classes.homeworkColor : classes.marksGrey}
onClick={(e) => setOpenDialog(e, cellValues, 'homework-marks', 'Q2')}
>
{cellValues?.row?.Q2HomeWorkWeightage
? Number.isInteger(cellValues?.row?.homeworkQ2) ? cellValues?.row?.homeworkQ2 : Number(cellValues?.row?.homeworkQ2).toFixed(2) : '-'}
</span>
),
},
{
field: 'homeworkQ3',
hide: !visibleFields?.includes(t('HOMEWORK')),
sortable: false,
headerName: t('Q3'),
align: 'left',
headerClassName: 'marksQ3Header',
cellClassName: 'marksQ3Cell',
renderCell: (cellValues) => (
<span
className={cellValues?.row?.Q3HomeWorkWeightage
? classes.homeworkColor : classes.marksGrey}
onClick={(e) => setOpenDialog(e, cellValues, 'homework-marks', 'Q3')}
>
{cellValues?.row?.Q3HomeWorkWeightage
? Number.isInteger(cellValues?.row?.homeworkQ3) ? cellValues?.row?.homeworkQ3 : Number(cellValues?.row?.homeworkQ3).toFixed(2) : '-'}
</span>
),
},
{
field: 'bonus',
hide: !visibleFields?.includes(t('BONUS_MARKS')),
sortable: false,
headerName: t('BONUS_MARKS'),
headerClassName: 'bonusHeaderSpan',
cellClassName: 'bonusCell',
renderCell: (cellValues) => (
<span
className={classes.marksGreen}
onClick={(e) => setOpenDialog(e, cellValues, 'bonus', null)}
>
{cellValues?.row?.bonus || 0}
</span>
),
},
{
field: 'grade',
hide: !visibleFields?.includes(t('GRADE')),
sortable: false,
headerName: t('GRADE'),
// align: 'left',
headerClassName: 'gradeHeader',
cellClassName: 'gradeCell',
},
{
field: 'gpa',
hide: !visibleFields?.includes(t('GPA')),
sortable: false,
headerName: t('GPA'),
// align: 'left',
headerClassName: 'gradeHeader',
cellClassName: 'gradeCell',
},
{
field: 'annualScore',
hide: !visibleFields?.includes(t('ANNUAL_SCORE')),
headerName: t('ANNUAL_SCORE'),
align: 'left',
headerClassName: 'commonHeader',
cellClassName: 'commonCell',
},
{
field: 'actions',
hide: !visibleFields?.includes(t('ACTIONS')),
headerName: t('ACTIONS'),
sortable: false,
headerAlign: 'left',
align: 'left',
headerClassName: 'commonHeader',
cellClassName: 'actionCells',
renderCell: (row) => (
<span style={{ display: 'flex' }}>
<span
style={{ paddingRight: 5 }}
>
<IconButton onClick={() => {
const data = new SwapCourse(row);
setCourseLocationInfo(data);
setSwapCourseOrLocation(true);
}}
>
<SwapIcon />
</IconButton>
</span>
<span>
<IconButton
onClick={() => {
const { manabadiEmail } = row.row.studentInfo;
const emailParents = [];
emailParents.push(row?.row?.parent1Info?.personalEmail?.toString());
emailParents.push(row?.row?.parent2Info?.personalEmail?.toString());
dispatch({ type: Constant.SET_MAIL_SUBJECT, payload: '' });
dispatch({ type: Constant.SET_MAIL_BODY, payload: '' });
dispatch({ type: Constant.RECIPIENTS, payload: [manabadiEmail] });
dispatch({ type: Constant.MAIL_FILTER, payload: 'Student' });
dispatch({ type: Constant.MAIL_PARENTS, payload: emailParents });
setLocalStorage('selectedLocation', row.row.enrolled_courses[0].location.id);
setLocalStorage('selectedYear', row.row.enrolled_courses[0].academicYear);
setLocalStorage('showLocationFilterRecipients', false);
setLocalStorage('showLocationAnnouncementsRecipients', false);
setLocalStorage('showSelectAllinEmail', false);
navigate(NavigateRoutes.LOCATION_COORDINATOR_EMAIL);
}}
>
<MailIcon />
</IconButton>
</span>
</span>
),
},
];
setColumns(columnsData);
}, [visibleFields]);
const showDetail = () => {
if (gridLoading || loading) {
return (
<Grid>
<Loader message={t('LOADING')} />
</Grid>
);
}
if (studentData?.length > 0) {
return (
<Grid xs={12} md={12} mt={5} className={classes.studentsList}>
<DataGridProTable
data={rowData}
columns={columns}
autoHeight
hideFooter
disableColumnFilter
disableColumnSelector
checkboxSelection
disableColumnMenu
disableColumnResize
disableSelectionOnClick
ColumnUnsorted
ColumnSortedAscending
ColumnSortedDescending
onSelectionModelChange={(ids) => {
setError('');
const selectedIDs = new Set(ids);
const selectedData = rowData.filter((row) => selectedIDs.has(row.id));
setSelectedRows(selectedData);
}}
loading={gridLoading}
/>
</Grid>
);
}
if (studentData?.length === 0) {
return (
<Grid container style={{ textAlign: 'center', height: '5vw', marginTop: '7vw' }} className={classes.noData}>
<Grid item xs={12} justifyContent="center">
<DoNotDisturbIcon />
</Grid>
<Grid item xs={12} justifyContent="center">
<Typography variant="subtitle2" color="text.secondary">
{t('NO_DATA')}
</Typography>
</Grid>
</Grid>
);
}
return null;
};
return (
<Grid container>
<Grid xs={12}>
<StudentHeader
{...{
formik,
locations,
years,
courseData,
t,
rowData,
fileHeaders,
fileName,
setDialogOpen,
selectedRows,
setError,
}}
/>
</Grid>
<Grid container spacing={2} direction="row" display="flex" alignItems="center">
<span className={classes.errorText}>{error}</span>
</Grid>
{showDetail()}
<DialogAtom
secHandle={() => setSwapCourseOrLocation(false)}
isOpen={isSwapCourseDialog}
dialogHeading={t('SWAP_SECTION')}
customClass={classes.swapCourseDialog}
footer={swapCourseDialogFooter}
content={swapCourseLocation}
/>
</Grid>
);
}
The studentHeader component has the dropdown which I need to change and add a customize handleChange method. But since its only using formik.handleChange imma little bit confused.
Child Component -- StudentHeader
import React, { useEffect } from 'react';
import { CSVLink } from 'react-csv';
import { Grid, Tooltip } from '#mui/material';
import FileDownloadOutlinedIcon from '#mui/icons-material/FileDownloadOutlined';
import EmailOutlinedIcon from '#mui/icons-material/EmailOutlined';
import { FormikProvider } from 'formik';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { setSelectedYear } from '../../../store/actions/getLocationCoordinator';
import { PerformantDropdown, PerfromantMultiValueDropdown } from '../../../components/atoms';
import styles from './style';
import MapPin from '../../../assets/images/map-pin.png';
import useStyles from '../../../custom-hooks/useStyles';
import { ColumnSelectIcon } from '../../../assets/svg';
import { NavigateRoutes } from '../../../constant';
import Constant from '../../../store/constant';
import { setLocalStorage } from '../../../utils/localStorageMethod';
function StudentHeader({
formik,
t,
fileHeaders,
years,
locations,
courseData,
fileName,
setDialogOpen,
selectedRows,
setError,
}) {
const classes = useStyles(styles)();
const navigate = useNavigate();
const dispatch = useDispatch();
setLocalStorage('selectedLocation', '');
setLocalStorage('selectedYear', '');
// const locationCoordinatorData = useSelector((state) => state?.getLocationCoordinator);
// const selectedYearRedux = locationCoordinatorData?.selectedYear;
// useEffect(() => {
// console.log(selectedYearRedux);
// }, [selectedYearRedux]);
useEffect(() => {
setLocalStorage('locationDashboard', false);
formik.setFieldValue('courseId', [courseData?.[0]?.id]);
}, [courseData]);
const sendBulkEmail = () => {
if (selectedRows.length > 0) {
setError('');
const emailList = [];
const emailParents = [];
selectedRows?.forEach((row) => {
emailList.push(row?.studentInfo?.manabadiEmail);
emailParents.push(row?.parent1Info?.personalEmail?.toString());
emailParents.push(row?.parent2Info?.personalEmail?.toString());
});
dispatch({ type: Constant.SET_MAIL_SUBJECT, payload: '' });
dispatch({ type: Constant.SET_MAIL_BODY, payload: '' });
dispatch({ type: Constant.RECIPIENTS, payload: emailList });
dispatch({ type: Constant.MAIL_PARENTS, payload: emailParents });
dispatch({ type: Constant.MAIL_FILTER, payload: 'Student' });
setLocalStorage('selectedLocation', formik?.values?.locationId);
setLocalStorage('selectedYear', formik?.values?.academicYear);
setLocalStorage('showSelectAllinEmail', false);
if (selectedRows.length > 0) {
setLocalStorage('showLocationFilterRecipients', false);
setLocalStorage('showLocationAnnouncementsRecipients', false);
} else {
setLocalStorage('showLocationFilterRecipients', false);
setLocalStorage('showLocationAnnouncementsRecipients', false);
}
navigate(NavigateRoutes.LOCATION_COORDINATOR_EMAIL);
} else {
setError(t('SELECT_ATLEAST_ONE_STUDENT'));
}
};
return (
<Grid container spacing={2} direction="row" display="flex" alignItems="center">
<FormikProvider value={formik}>
<Grid item xs={4} sm={1.5} className={classes.year}>
<PerformantDropdown
minWidth="100%"
label={t('YEAR')}
labelId={t('YEAR')}
id="academicYear"
name="academicYear"
value={formik.values.academicYear}
handleChange={formik.handleChange}
options={years}
customClass="yearDropdown"
variant="standard"
/>
</Grid>
<Grid item xs={4.5} className={classes.locationDropdown}>
<PerformantDropdown
minWidth="100%"
label={t('LOCATION')}
id="locationId"
name="locationId"
value={formik.values.locationId}
handleChange={formik.handleChange}
options={locations}
customClass="locationDropdown"
variant="standard"
icon={<img src={MapPin} alt="" className={classes.mapPinImg} />}
/>
</Grid>
<Grid item xs={6} sm={3} className={classes.courseDropdown}>
<PerfromantMultiValueDropdown
minWidth="100%"
label={t('COURSE')}
value={formik.values.courseId}
options={courseData}
onChange={formik.handleChange}
id="courseId"
name="courseId"
variant="standard"
customClass="courseDropdown"
/>
</Grid>
<Grid item md={1.4} />
<Grid item xs={0.5} className={classes.gridActions}>
{/* {selectedRows?.length ? ( */}
<Tooltip title={t('DOWNLOAD')} placement="right">
<div className={classes.header}>
<CSVLink
headers={fileHeaders}
data={selectedRows}
filename={`${fileName}.csv`}
target="_blank"
>
<FileDownloadOutlinedIcon />
</CSVLink>
</div>
</Tooltip>
{/* ) : null} */}
</Grid>
<Grid item xs={0.5} className={classes.gridActions} onClick={sendBulkEmail}>
<Tooltip title={t('SEND_EMAIL')} placement="right">
<div className={classes.header}>
<EmailOutlinedIcon className={classes.header} />
</div>
</Tooltip>
</Grid>
<Grid
item
xs={0.5}
onClick={() => setDialogOpen(true)}
className={classes.gridActions}
>
{' '}
<Tooltip title={t('UPDATE_SETTINGS')} placement="right">
<div>
<ColumnSelectIcon
customClass={classes.columnSelectionIcon}
strokeColor="#104F96"
/>
</div>
</Tooltip>
</Grid>
</FormikProvider>
</Grid>
);
}
export default StudentHeader;
These two PerformatDropdown needs to be changed. I want to have a handleChange method which will change the value and dispatch a redux action which will store the changed value. The redux part I already solved, please tell me how can change the formik.handleChange??

Answer 1

or we could do this
const handleYearChange = (e) => {
formik.setFieldValue('academicYear', e.target.value);
const payload = {
id: e.target.value,
name: e.target.value,
};
dispatch(setSelectedYear(payload));
};
<PerformantDropdown
minWidth="100%"
label={t('YEAR')}
labelId={t('YEAR')}
id="academicYear"
name="academicYear"
value={formik.values.academicYear}
handleChange={(e) => handleYearChange(e)}
options={years}
customClass="yearDropdown"
variant="standard"
/>