Component definition is missing display name in reactjs? - reactjs

I am complete my project. Now I am trying to get a production build. But I am getting an error with name "Component definition is missing display name". I am using nextjs.
From my whole proect only two component, show that error like image-
Clikc to see the image. I use material-table-core with mui5 in both component.
I am fully confused why I am seeing this error?
One of that component is-
import React from "react";
import { forwardRef } from "react";
import { Box, Stack, SvgIcon, Typography, ButtonBase, InputBase, Rating } from "#mui/material";
import { Star, ArrowDownward } from '#mui/icons-material';
import MaterialTable, { Column } from "#material-table/core";
//Custom Icon
import { DeleteIcon, ArrowUp, ArrowDown } from "Utilis/Icons";
//Theme
import theme from "Theme";
//Styles
import useStyles from "Styles/Common/DataTable.styles";
//Data
import cartData from "Data/Cart.data";
const DataTable = () => {
const classes = useStyles();
const columns = [
{ title: 'Product', field: 'product', cellStyle: { width: "75%" } },
{ title: 'Price', field: 'price', cellStyle: { width: "5%" } },
{ title: 'Quantity', field: 'quantity', cellStyle: { width: "10%" } },
{ title: 'Subtotal', field: 'subtotal', cellStyle: { width: "5%" } },
{ title: 'Remove', field: 'action', cellStyle: { width: "5%" } }
];
const data = [];
cartData && cartData.forEach(cart => {
data.push({
product: <Stack direction="row" sx={{ alignItems: "center" }}>
<Box>
<Box component="img" className={classes.ProductImages} src={cart.product.images[0].url} alt="Product Image" />
</Box>
<Box>
<Typography className={classes.ProductTitle} variant="h6" component="h6">
{cart.product.name}
</Typography>
<Rating
name="half-rating-read"
defaultValue={5}
precision={4}
readOnly
className={classes.Star}
emptyIcon={<Star fontSize="inherit" />}
/>
</Box>
</Stack>,
price: <Typography className={classes.ProductPrice} variant="h6" component="h6">
${cart.product.price}
</Typography>,
quantity:
<Box sx={{ position: "relative" }} className="sdfjshfggb">
<InputBase
className={classes.InputField}
value={cart.count}
type="text"
/>
<Box className={classes.CounterButton}>
<ButtonBase>
<SvgIcon viewBox="0 0 23 13">
{ArrowUp}
</SvgIcon>
</ButtonBase>
<ButtonBase>
<SvgIcon viewBox="0 0 23 13">
{ArrowDown}
</SvgIcon>
</ButtonBase>
</Box>
</Box>,
subtotal:
<Typography variant="h6" component="h6" className={classes.ProductPriceTotal}>
${cart.product.price * cart.count}
</Typography>,
action:
<ButtonBase className={classes.RemoveButton} >
<SvgIcon viewBox="0 0 24 24">{DeleteIcon}</SvgIcon>
</ButtonBase >
})
})
return (
<Box className={classes.DataTable}>
<MaterialTable
columns={columns}
data={data}
options={{
search: false,
showTitle: false,
toolbar: false,
selection: true,
paging: false,
headerStyle: {
backgroundColor: theme.palette.primary.input_bg,
color: theme.palette.primary.main,
}
}}
localization={{
body: {
emptyDataSourceMessage: (
<Typography variant="body1" component="p">
Cart is Empty!
</Typography>
),
},
}}
icons={{ SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />) }}
onSelectionChange={(e) => console.log(e)}
/>
</Box>
);
};
export default DataTable;
I am new in react/nextjs. This is my first project. Anyone can help me?

You are using an arrow funciton. You can either switch to a regular function, which will solve the problem of the displayName or you can set the displayName of the arrow function right before exporting it. Exporting an arrow function directly doesn't give the component a displayName.
DataTable.displayName = "DataTable"
export default DataTable;

Related

React FullCalendar console error changedOptionNames is not iterable

I am trying to use fullCalendar on my react project and I followed the steps that I saw on their docs, all plugins library that I am using, I install and imported but when I try to use eventsSet and change the State function I got a console error.
If I comment the eventsSet the Calendar works, does someone know what could be causing this?
my code:
https://github.com/wandersonce/Admin-Dashboard/blob/main/src/scenes/calendar/index.jsx
<pre>
import { useState } from 'react';
import FullCalendar from '#fullcalendar/react';
import { formatDate } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import interactionPlugin from '#fullcalendar/interaction';
import listPlugin from '#fullcalendar/list';
import {
Box,
List,
ListItem,
ListItemText,
Typography,
useTheme,
} from '#mui/material';
import Header from '../../components/Header';
import { tokens } from '../../theme';
export default function Calendar() {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [currentEvents, setCurrentEvents] = useState([]);
const handleDateClick = (selected) => {
const title = prompt('Please enter a new title for your event');
const calendarApi = selected.view.calendar;
calendarApi.unselect();
if (title) {
calendarApi.addEvent({
id: `${selected.dateStr}-${title}`,
title,
start: selected.startStr,
end: selected.endStr,
allDay: selected.allDay,
});
}
};
const handleEventClick = (selected) => {
if (
window.confirm(
`Are you sure you want to delete the event '${selected.event.title}'`
)
) {
selected.event.remove();
}
};
return (
<Box m="20px">
<Header title="Calendar" subtitle="Full Calendar Interactive Page" />
<Box display="flex" justifyContent="space-between">
{/* CALENDAR SIDEBAR */}
<Box
flex="1 1 20%"
backgroundColor={colors.primary[400]}
p="15px"
borderRadius="4px"
>
<Typography variant="h5">Events</Typography>
<List>
{currentEvents.map((event) => (
<ListItem
key={event.id}
sx={{
backgroundColor: colors.greenAccent[500],
margin: '10px 0',
borderRadius: '2px',
}}
>
<ListItemText
primary={event.title}
secondary={
<Typography>
{formatDate(event.start, {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</Typography>
}
/>
</ListItem>
))}
</List>
</Box>
{/* CALENDAR */}
<Box flex="1 1 100%" ml="15px">
<FullCalendar
height="75vh"
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
]}
headerToolbar={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
}}
initialView="dayGridMonth"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={handleDateClick}
eventClick={handleEventClick}
initialEvents={[
{
id: '12315',
title: 'All-day event',
date: '2022-09-14',
},
{
id: '5123',
title: 'Timed event',
date: '2022-09-28',
},
]}
eventsSet={(events) => setCurrentEvents(events)}
/>
</Box>
</Box>
</Box>
);
</pre>
and the error:

Putting gradient background using makeStyles

For some reason, it doesn't respect background: 'linear-gradient(to right, blue.200, blue.700)' under makeStyles. Why is that? All I need to do is put a gradient background on the entire space. <Container className={classes.root}> should probably be a div, what do you think?
import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from '#mui/material/Container';
import Box from '#mui/material/Box';
import { DataGrid, GridColDef } from '#mui/x-data-grid';
import { createStyles, Grid, Paper, Theme, Typography } from '#mui/material';
import { makeStyles } from '#mui/styles';
import Skeleton from '#mui/material/Skeleton';
import FormOne from './../src/FormOne';
const LoadingSkeleton = () => (
<Box
sx={{
height: 'max-content',
}}
>
{[...Array(10)].map((_, index) => (
<Skeleton variant="rectangular" sx={{ my: 4, mx: 1 }} key={index} />
))}
</Box>
);
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID' },
{ field: 'title', headerName: 'Title', width: 300 },
{ field: 'body', headerName: 'Body', width: 600 },
];
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
height: '100vh',
overflow: 'auto',
background: `linear-gradient(to right, blue.200, blue.700)`,
},
})
);
const Home: NextPage = () => {
const classes = useStyles();
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
// fetch data from fake API
useEffect(() => {
setInterval(
() =>
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => {
setPosts(data);
setLoading(false);
}),
3000
);
}, []);
return (
<Container
maxWidth={false}
// sx={{
// height: '100vh',
// overflow: 'auto',
// background: `linear-gradient(to right, ${blue[200]}, ${blue[700]})`,
// }}
className={classes.root}
>
<Container component="main" maxWidth="lg" sx={{ mt: 3, mb: 3 }}>
<Grid container spacing={{ xs: 2, md: 3 }}>
<Grid item xs={6}>
<Paper sx={{ padding: 3 }}>
<Typography component="h1" variant="h4" align="center">
GUI #1
</Typography>
<FormOne />
</Paper>
</Grid>
<Grid item xs={6}>
<Paper sx={{ padding: 3 }}>
<Typography component="h1" variant="h4" align="center">
GUI #2
</Typography>
<FormOne />
</Paper>
</Grid>
<Grid item xs={12}>
<Paper sx={{ padding: 3 }}>
<DataGrid
sx={{ height: '650px' }} // either autoHeight or this
rows={posts}
columns={columns}
pageSize={10}
// autoHeight
rowsPerPageOptions={[10]}
disableSelectionOnClick
disableColumnMenu
disableColumnSelector
components={{
LoadingOverlay: LoadingSkeleton,
}}
loading={loading}
/>
</Paper>
</Grid>
</Grid>
</Container>
</Container>
);
};
export default Home;
I think its because you pass it as a string and it simply doesnt recognice what blue.200 is etc.
try:
background: `linear-gradient(to right, ${blue[200]}, ${blue[700])}`,
#Edit
You actualy need to import color that you want to use from #mui/color
import { blue } from "#mui/material/colors";
and then use it as I mentioned before
here is codesandbox preview and here is codesandbox code
hope this is what we want to achieve
Instead of using background use backgroundImage. This should fix the problem.
The code should be
backgroundImage: `linear-gradient(to right, blue[200], blue[700])`,

Problem autoFocus Autocomplete Material UI

I am not able to focus on the first element of my form which is an Autocomplete component of the Material UI.
When opening the modal, the focus is on the 'unit' element, as shown in the image below:
It dont's work
I want the focus to be on the 'group' element, as shown below:
It work
Here is the Sandbox link:
https://codesandbox.io/s/awesome-bassi-zjp50?file=/src/MyForm.jsx:1422-1431
can anyone help me?
MyForm
import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import { Grid } from "#material-ui/core";
import Input from "./components/Input";
import Autocomplete from "./components/Autocomplete";
const initialValues = {
id: 0,
group: {
value: 0,
label: ""
},
name: "",
unit: {
value: 0,
label: ""
}
};
const groupList = [
{
value: "1",
label: "Seeds"
},
{
value: "2",
label: "Fertilizers"
}
];
const unitList = [
{
value: "1",
label: "kg"
},
{
value: "2",
label: "t"
}
];
const validationSchema = Yup.object({
group: Yup.object().shape({
value: Yup.number().required().min(1).nullable()
}),
name: Yup.string().required().max(50),
unit: Yup.object().shape({
value: Yup.number().required().min(1).nullable()
})
});
export default function MyForm() {
function _onSubmit(fields, { props, setErrors, setSubmitting }) {
console.log(fields);
}
return (
<Formik
enableReinitialize={true}
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={_onSubmit}
>
{function Render({ errors, touched, isSubmitting, setFieldValue }) {
return (
<Form id="form">
<Grid container direction="row">
<Grid item xs={12}>
<Field
name="group"
autoFocus
component={Autocomplete}
label="Group"
options={groupList}
disabled={isSubmitting}
textFieldProps={{
fullWidth: true,
margin: "dense",
variant: "outlined"
}}
/>
</Grid>
<Grid item xs={12}>
<Field
name="name"
fullWidth
label="Name"
disabled={isSubmitting}
component={Input}
/>
</Grid>
<Grid item xs={12}>
<Field
name="unit"
component={Autocomplete}
label="Unit"
options={unitList}
disabled={isSubmitting}
textFieldProps={{
fullWidth: true,
margin: "dense",
variant: "outlined"
}}
/>
</Grid>
</Grid>
</Form>
);
}}
</Formik>
);
}
Popup Modal
import React from "react";
import {
Dialog,
DialogTitle,
DialogContent,
makeStyles,
Typography,
Divider,
DialogActions,
Button,
Grid,
Box
} from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
dialogWrapper: {
padding: theme.spacing(2),
position: "absolute",
top: theme.spacing(5)
},
dialogTitle: {
paddingRight: 0
},
button: {
margin: theme.spacing(0.5),
textTransform: "none"
},
buttonsContainer: {
display: "flex",
flex: "0 0 auto",
justifyContent: "flex-end",
width: "100%",
height: "100%"
},
buttons: {
display: "flex"
},
loadingIcon: {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: theme.spacing(1)
}
}));
function Popup(props) {
const classes = useStyles();
const { title, children, openPopup, setOpenPopup, ...rest } = props;
return (
<Dialog
{...rest}
open={openPopup}
maxWidth="sm"
classes={{ paper: classes.dialogWrapper }}
>
<DialogTitle dividers="true" className={classes.dialogTitle}>
<div style={{ display: "flex" }}>
<Typography variant="h4" component="div" style={{ flexGrow: 1 }}>
{title}
</Typography>
</div>
</DialogTitle>
<Divider />
<DialogContent {...rest} direction="row">
{children}
</DialogContent>
<DialogActions {...rest}>
<Grid {...rest} container className={classes.buttonsContainer}>
<Box {...rest} className={classes.buttons}>
<Button
className={classes.button}
variant="contained"
color="primary"
type="submit"
form="form"
{...rest}
>
Save
</Button>
<Button
className={classes.button}
color="default"
fullWidth
onClick={() => {
setOpenPopup(false);
}}
{...rest}
>
Cancel
</Button>
</Box>
</Grid>
</DialogActions>
</Dialog>
);
}
export default Popup;
Autocomplete
import React from "react";
import { FieldProps, getIn } from "formik";
import { TextField, CircularProgress } from "#material-ui/core";
import MuiAutocomplete, {
createFilterOptions
} from "#material-ui/lab/Autocomplete";
const NewAutocomplete: React.FC<
FieldProps & {
label?: string,
options: Array<{ label: string, value: number }>
}
> = ({ textFieldProps, field, form, label, options, isLoading, ...props }) => {
const filterOptions = createFilterOptions({
matchFrom: "start",
limit: 500
});
const errorText =
getIn(form.touched, field.name) && getIn(form.errors, field.name);
const valueInit = [
{
value: 0,
label: ""
}
];
return (
<MuiAutocomplete
{...props}
{...field}
filterOptions={filterOptions}
options={[...valueInit, ...options]}
getOptionLabel={(option) => (option ? option.label : "")}
getOptionSelected={(option, value) => option.value === value?.value}
style={{ width: 300 }}
loading={isLoading}
value={field.value}
onChange={(e, value) => {
form.setFieldValue(field.name, value);
}}
renderInput={(props) => (
<>
<TextField
{...props}
{...textFieldProps}
label={label}
helperText={errorText?.value || errorText}
error={!!errorText}
autoFocus
InputProps={{
...props.InputProps,
endAdornment: (
<React.Fragment>
{isLoading ? (
<CircularProgress color="primary" size={20} />
) : null}
{props.InputProps.endAdornment}
</React.Fragment>
)
}}
/>
</>
)}
/>
);
};
export default NewAutocomplete;
Thanks for your help!
You're actually setting autoFocus to true on TextField by default inside your NewAutocomplete definition (src/components/Autocomplete.jsx:50 in your sandbox).
Once that line removed, you can then add autoFocus: true to textFieldProps value of your first Field in MyForm component.
See codesandbox example

How to override default location of snackbar notification DropZoneArea

I'm trying to change the default location of the snackbar in material ui DropZone to be at the bottom center.
The default location for the snackbar notification in vertical origin is Bottom and in the horizontal origin is Left.
Any suggestions or thoughts would be helpful.
import React from "react";
import { DropzoneArea } from "material-ui-dropzone";
import { makeStyles } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
dropZoneContainer: {
width: "100%",
minHeight: "0",
},
}));
const DropZone = ({ text, onChange, error }) => {
const classes = useStyles();
const SUPPORTED_FORMATS = [
"image/jpg",
"image/jpeg",
"image/gif",
"image/png",
];
return (
<React.Fragment>
<DropzoneArea
acceptedFiles={SUPPORTED_FORMATS}
maxFileSize={2000000}
useChipsForPreview
filesLimit={1}
dropzoneText={text}
onChange={onChange}
classes={{ root: classes.dropZoneContainer }}
/>
<label style={{ color: "black", fontSize: "0.9rem" }}>
Max size allowed is 2 MB
</label>
<small
className="form-text text-danger"
style={{ color: "red", fontSize: "0.8rem", fontWeight: "bold" }}
>
{error}
</small>
</React.Fragment>
);
};
export default DropZone;
You can use alertSnackbarProps to pass props to the SnackBar withinDropzoneArea.
Use the anchorOrigin prop to position Snackbar
like
<DropzoneArea
acceptedFiles={SUPPORTED_FORMATS}
maxFileSize={2000000}
useChipsForPreview
filesLimit={1}
dropzoneText={text}
onChange={onChange}
classes={{ root: classes.dropZoneContainer }}
alertSnackbarProps={{anchorOrigin:{ vertical: 'bottom', horizontal: 'center' }}}
/>

How render a list of options with renderOption in material UI

I want to change the background colour of the options inside an Autocomplete component, and the closest I can get is by using the renderOption prop.
The problem is that I can't figure out how to iterate (using map()) the options that I have in my state.
What I would like to do is something like
{state.myOptions.map( option => {
// here I would like to call renderOption = .....
}
Inside the <Autocomplete/> component
Is it possible to implement something like this or is there a well defined manner to do it?
EDIT
This is the component
import React, { useEffect } from 'react'
import { useForm, Form } from './hooks/useForm'
import EventIcon from '#material-ui/icons/Event';
import { makeStyles, TextField, Typography } from '#material-ui/core'
import CustomTextField from './inputs/CustomTextField';
import { Autocomplete } from '#material-ui/lab';
import { connect } from 'react-redux'
const EventForm = (props) => {
// Redux
const { family } = props
// React
const initialState = {
email: "",
password: "",
errors: {
email: "",
password: ""
},
familyMembers: ["rgeg"]
}
const { state, handleOnChange, setState } = useForm(initialState)
useEffect(() => {
family && state.familyMembers !== family.members && setState({
...state,
familyMembers: family.members
})
})
// Material UI
const useStyles = makeStyles(theme => (
{
message: {
marginTop: theme.spacing(3)
},
icon: {
backgroundColor: "lightgrey",
padding: "10px",
borderRadius: "50px",
border: "2px solid #3F51B5",
marginBottom: theme.spacing(1)
},
typography: {
marginBottom: theme.spacing(1),
marginTop: theme.spacing(4)
},
customTextField: {
marginTop: theme.spacing(0)
},
dateTimeWrapper: {
marginTop: theme.spacing(4)
}
}
))
const classes = useStyles()
return (
<>
<div>WORK IN PROGRESS...</div>
<br />
<br />
<EventIcon className={classes.icon} />
<Form
title="Add new event"
>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Enter a title for this event
</Typography>
<CustomTextField
className={classes.customTextField}
label="Title"
/>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Enter a location for this event
</Typography>
<CustomTextField
className={classes.customTextField}
label="Location"
/>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Which member/s of the family is/are attending
</Typography>
<Autocomplete
multiple
id="tags-outlined"
options={state.familyMembers}
getOptionLabel={(option) => option.name}
// defaultValue={[familyMembers[0]]}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Members Attending"
placeholder="Family Member"
/>
)}
/>
</Form>
</>
);
}
// Redux
const mapStateToProps = (state) => {
return {
family: state.auth.family
}
}
export default connect(mapStateToProps)(EventForm);
If you only want to override the color of the option you can do it by overriding it's styles. No need to make custom option rendering function.
Above is the example of how can you achieve that.
import React, { useEffect } from 'react'
import { useForm, Form } from './hooks/useForm'
import EventIcon from '#material-ui/icons/Event';
import { makeStyles, TextField, Typography } from '#material-ui/core'
import CustomTextField from './inputs/CustomTextField';
import { Autocomplete } from '#material-ui/lab';
import { connect } from 'react-redux'
const EventForm = (props) => {
// Redux
const { family } = props
// React
const initialState = {
email: "",
password: "",
errors: {
email: "",
password: ""
},
familyMembers: ["rgeg"]
}
const { state, handleOnChange, setState } = useForm(initialState)
useEffect(() => {
family && state.familyMembers !== family.members && setState({
...state,
familyMembers: family.members
})
})
// Material UI
const useStyles = makeStyles(theme => (
{
message: {
marginTop: theme.spacing(3)
},
icon: {
backgroundColor: "lightgrey",
padding: "10px",
borderRadius: "50px",
border: "2px solid #3F51B5",
marginBottom: theme.spacing(1)
},
typography: {
marginBottom: theme.spacing(1),
marginTop: theme.spacing(4)
},
customTextField: {
marginTop: theme.spacing(0)
},
dateTimeWrapper: {
marginTop: theme.spacing(4)
},
option: {
backgroundColor: 'red'
}
}
))
const classes = useStyles()
return (
<>
<div>WORK IN PROGRESS...</div>
<br />
<br />
<EventIcon className={classes.icon} />
<Form
title="Add new event"
>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Enter a title for this event
</Typography>
<CustomTextField
className={classes.customTextField}
label="Title"
/>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Enter a location for this event
</Typography>
<CustomTextField
className={classes.customTextField}
label="Location"
/>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Which member/s of the family is/are attending
</Typography>
<Autocomplete
multiple
id="tags-outlined"
classes={{
option: classes.option
}}
options={state.familyMembers}
getOptionLabel={(option) => option.name}
// defaultValue={[familyMembers[0]]}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Members Attending"
placeholder="Family Member"
/>
)}
/>
</Form>
</>
);
}
// Redux
const mapStateToProps = (state) => {
return {
family: state.auth.family
}
}
export default connect(mapStateToProps)(EventForm);
Wow, this took a while but the solution seems to use 'renderTags' algong with
here is the exact solution
import React, { useEffect } from 'react'
import { useForm, Form } from './hooks/useForm'
import EventIcon from '#material-ui/icons/Event';
import { makeStyles, TextField, Typography } from '#material-ui/core'
import CustomTextField from './inputs/CustomTextField';
import { Autocomplete } from '#material-ui/lab';
import { connect } from 'react-redux'
import Chip from '#material-ui/core/Chip';
import getColorvalue from './outputs/ColorValues'
const EventForm = (props) => {
// Redux
const { family } = props
// React
const initialState = {
email: "",
password: "",
errors: {
email: "",
password: ""
},
familyMembers: ["rgeg"]
}
const { state, handleOnChange, setState } = useForm(initialState)
useEffect(() => {
family && state.familyMembers !== family.members && setState({
...state,
familyMembers: family.members
})
})
// Material UI
const useStyles = makeStyles(theme => (
{
message: {
marginTop: theme.spacing(3)
},
icon: {
backgroundColor: "lightgrey",
padding: "10px",
borderRadius: "50px",
border: "2px solid #3F51B5",
marginBottom: theme.spacing(1)
},
typography: {
marginBottom: theme.spacing(1),
marginTop: theme.spacing(4)
},
customTextField: {
marginTop: theme.spacing(0)
},
dateTimeWrapper: {
marginTop: theme.spacing(4)
}
}
))
const classes = useStyles()
return (
<>
<div>WORK IN PROGRESS...</div>
<br />
<br />
<EventIcon className={classes.icon} />
<Form
title="Add new event"
>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Enter a title for this event
</Typography>
<CustomTextField
className={classes.customTextField}
label="Title"
/>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Enter a location for this event
</Typography>
<CustomTextField
className={classes.customTextField}
label="Location"
/>
<Typography
variant="subtitle1"
className={classes.typography}
align="left">
Which member/s of the family is/are attending
</Typography>
<Autocomplete
multiple
id="tags-outlined"
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip
variant="outlined"
key={option}
style={{
backgroundColor: `${getColorvalue(state.familyMembers[state.familyMembers.indexOf(option)].color)}`,
color: "white"
}}
label={option.name}
onDelete={() => console.log("test")}
{...getTagProps({ index })}
/>
))
}
options={state.familyMembers}
getOptionLabel={(option) => option.name}
// defaultValue={[familyMembers[0]]}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Members Attending"
placeholder="Family Member"
/>
)}
/>
</Form>
</>
);
}
// Redux
const mapStateToProps = (state) => {
return {
family: state.auth.family
}
}
export default connect(mapStateToProps)(EventForm);

Resources