ReactJS - How can I make this option conditional? - reactjs

Question

I am working with the FlatPickr Date/Time module trying to implement the monthSelect plugin on only those fields that need it. How can I make the plugin option "monthSelectPlugin" line of code conditional based on a prop that I pass in?
(see comments in Flatpickrdatetime.jsx)
I get the following error with the code below. Also, I'm sure there is a better way to make one line of code conditional, and I am here for it, just not sure how.
Error:
Error: Flatpickrdatetime(...): Nothing was returned from render.
This usually means a return statement is missing. Or, to render nothing, return null.
Arrival / Departure page:
import React from 'react';
import { Grid, Typography, FormControl} from '#material-ui/core';
import Flatpickrdatetime from './FormFields/Flatpickrdatetime';
<Grid container item spacing={3}>
<Grid item xs={12} md={6}>
<InputLabel shrink htmlFor="bootstrap-input">Arrival Date</InputLabel>
<Flatpickrdatetime type="monthSelect" />
</Grid>
<Grid item xs={12} md={6}>
<InputLabel shrink htmlFor="bootstrap-input">Depart Date</InputLabel>
<Flatpickrdatetime />
</Grid>
</Grid>
Flatpickrdatetime.jsx
/* https://flatpickr.js.org/examples/ */
import React from 'react';
import { fade, makeStyles } from '#material-ui/core/styles';
import "flatpickr/dist/themes/light.css";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index.js";
import "flatpickr/dist/plugins/monthSelect/style.css";
import "flatpickr/dist/themes/light.css";
import Flatpickr from "react-flatpickr";
export default function Flatpickrdatetime(props) {
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
margin: {
marginTop: theme.spacing(3),
width:'100%'
},
flatpickr:{
marginBottom:'0.25em',
borderRadius: 4,
}
}));
const classes = useStyles();
{(() => {
if (props.type === 'monthSelect'){
return (
<Flatpickr
options={{
format: "m/d/Y",
altFormat: "m/d/Y",
altInput: true,
allowInput: true,
// if props.type equals monthSelect
plugins: [new monthSelectPlugin({shorthand: false, dateFormat: "Y-m-d", altFormat: "M Y"})]
}}
className={classes.flatpickr} />
);
}else if(props.type != 'monthSelect'){
return (
<Flatpickr
options={{
format: "m/d/Y",
altFormat: "m/d/Y",
altInput: true,
allowInput: true,
// no plugin if props.type does not equal monthSelect
}}
className={classes.flatpickr} />
);
}else{
return null;
}
})()}
}

Answer 1

Your IFFE here {(() => { seems to be the problem. Why do you use it? Just remove it and leave the conditional statement and you should be fine.

Answer 2

your IFFE does return a value, but it is wrapped in a block statement and you miss your return Component. if you had it like below would work, but it's not neat:
return (() => {return something })()
First, I would recommend to define your styles outside of the component. Otherwise each rerender makeStyles is called unnecessary.
Second, you could abstract your options object build logic outside the render part, and avoid all that code duplication. You could useMemo to memorize its value. It will keep the same options unless type changes (you set as dependency).
one more thing, based on your logic null is never hit. It's a not reachable point, it will always render the first or second condition since if one is true the other is false.
after this you could have your component as:
import React, { useMemo } from 'react';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
margin: {
marginTop: theme.spacing(3),
width:'100%'
},
flatpickr:{
marginBottom:'0.25em',
borderRadius: 4,
}
}));
export default function Flatpickrdatetime({ type }) {
const classes = useStyles();
const options = useMemo(() => {
const flatpickOps = {
format: "m/d/Y",
altFormat: "m/d/Y",
altInput: true,
allowInput: true,
}
if (type === 'monthSelect') {
flatpickOps.plugins = [new monthSelectPlugin({shorthand: false, dateFormat: "Y-m-d", altFormat: "M Y"})]
}
return flatpickOps
}, [type])
return <Flatpickr options={options} className={classes.flatpickr} />
}