setState is not being called onClick - reactjs

Working with material-ui v3.9.4, react-router v3. Created a left nav bar with a List containing Link items to redirect to another page. For some reason when I click on an item, the page is redirected, but the state is not updated until the second click to show the active item. Any idea as to why that is? Code below. I've console logged the setState change, which doesnt print until the second click.
class LeftNavigation extends Component {
constructor(props) {
super(props);
this.state = {
selectedIndex: 0,
sidebarCollapsed: false,
}
}
handleListItemClick = (event, index) => {
console.log("CLICKED"); //prints first click
this.setState({ selectedIndex: index }, () => {
console.log("SELECTED INDEX:: ", this.state.selectedIndex) //prints second click
});
}
handleCollapse = () => {
this.setState({ sidebarCollapsed: !this.state.sidebarCollapsed })
}
render() {
const { classes } = this.props;
return (
<div className={this.state.sidebarCollapsed ? classes.rootCollapsed : classes.root}>
<List component="nav">
<ListItem
button
component={props => <Link to="./pageOne" {...props} />}
selected={this.state.selectedIndex === 0}
onClick={(event) => this.handleListItemClick(event, 0)}
>
<ListItemIcon>
<CalendarIcon />
</ListItemIcon>
<ListItemText classes={{ primary: classes.listText }} primary="Page One" />
</ListItem>
<ListItem
button
onClick={(event) => this.handleListItemClick(event, 1)}
component={props => <Link to="./pageTwo" {...props} />}
selected={this.state.selectedIndex === 1}
>
<ListItemIcon>
<MailIcon />
</ListItemIcon>
<ListItemText classes={{ primary: classes.listText }} primary="Page Two" />
</ListItem>
<ListItem
button
component={props => <Link to="./pageThree" {...props} />}
selected={this.state.selectedIndex === 2}
onClick={(event) => this.handleListItemClick(event, 2)}
>
<ListItemIcon>
<NotesIcon />
</ListItemIcon>
<ListItemText classes={{ primary: classes.listText }} primary="Page Three" />
</ListItem>
</List>
<div
onClick={this.handleCollapse}>
{this.state.sidebarCollapsed ? <ChevronRight /> :
<div><ChevronLeft /><p>Collapse sidebar</p></div>}
</div>
</div>
)
}
}
export default withStyles(styles)(LeftNavigation );

Related

function remove of react-hook-form removing last element instead of correct one

i am trying to use useFieldsArray from react-hook-form, but when I click on the button to delete, instead of deleting the correct element it always deletes the last one. can someone more experienced give me some advice?
I don't understand what I'm doing wrong.
Thanks in advance.
export const isThisAFieldsArrayContext = React.createContext(false)
export default function FieldsArray({
control,
formNamePrefix,
register,
inputsToRender,
addNewDisabled = false,
watchConfig,
...props
}) {
const classes = useStyles()
const { append, remove } = useFieldArray({
control,
shouldUnregister: false,
name: formNamePrefix,
})
const additionalProps = useWatchForAdditionalProps(watchConfig)
function handleRemove(index) {
remove(index)
}
return (
<isThisAFieldsArrayContext.Provider value={true}>
<Grid item xs={12}>
<List>
{control.getValues(formNamePrefix)?.map((item, index) => {
console.log({ item })
return (
<ListItem key={index} className={classes.listItem}>
<DynamicFormFields
{...props}
register={register}
fieldsKey={`${formNamePrefix}.${index}`}
formFields={inputsToRender}
control={control}
// defaultValue={item.defaultValue}
/>
<DeleteButton
variant="contained"
onClick={() => handleRemove(index)}
aria-label="delete"
className={classes.deleteButton}
>
<DeleteIcon color="secondary" fontSize="small" />
</DeleteButton>
</ListItem>
)
})}
</List>
<Button
variant="contained"
onClick={() => append({})}
aria-label="add"
color="secondary"
className={classes.addButton}
disabled={addNewDisabled || additionalProps.disabled}
>
<AddIcon color="primary" />
</Button>
</Grid>
</isThisAFieldsArrayContext.Provider>
)
useFieldArray returns fields
const { fields, ... } = useFieldArray(...)
Use it to map
fields.map((item, index) => {
// there is an 'id' in item. Use it for key!
return (
<ListItem key={item.id}>
...
<button onClick={() => handleRemove(index)}>Delete</button>
...
</ListItem>
)
})
The value of 'formNamePrefix' has to be an array of objects.
Example:
useForm({
defaultValues: {
[formNamePrefix]: [{name: 'name1'}, {name: 'name2'}, ...]
}
})

Cannot read property map of undefined react

I'm trying to render a component that uses an array of filters to make a list. I pass the array as an argument to the function but it returns an error. The array is not null or undefined because it shows the itens if I log to the console.
Console.log returns:
Here is my code:
const List = (filtrosPorTipo) => {
let filtros = filtrosPorTipo[0]
let valoresDosFiltros = filtrosPorTipo[1]
let lista = (
<List>
{filtros.map((item, index) => {
return (
<>
<ListItem
button
onClick={() => setOpen({ [item]: !open[item] })}
key={item}
>
<ListItemText primary={item} />
{open[item] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[item]} timeout='auto'>
<List component='div' disablePadding>
{valoresDosFiltros[index].map((filtro) => {
return (
<>
<ListItem key={filtro}>
<p>{`${filtro}\n`}</p>
<ListItemSecondaryAction>
<Checkbox
label={filtro}
key={filtro.toString()}
color='primary'
onChange={() => handleChecked(filtro)}
checked={checked[filtro]}
/>
</ListItemSecondaryAction>
</ListItem>
<Divider />
</>
)
})}
</List>
</Collapse>
</>
)
})}
</List>
)
return lista
}
Error:
Perhaps the component it's trying to render before "filtros" is assigned. It's a common and logical behavior in React.
Try adding a conditional before the .map() call:
{filtros ? filtros.map((item, index) => {
return (
<>
<ListItem
button
onClick={() => setOpen({ [item]: !open[item] })}
key={item}
>
<ListItemText primary={item} />
{open[item] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[item]} timeout='auto'>
<List component='div' disablePadding>
{valoresDosFiltros[index].map((filtro) => {
return (
<>
<ListItem key={filtro}>
<p>{`${filtro}\n`}</p>
<ListItemSecondaryAction>
<Checkbox
label={filtro}
key={filtro.toString()}
color='primary'
onChange={() => handleChecked(filtro)}
checked={checked[filtro]}
/>
</ListItemSecondaryAction>
</ListItem>
<Divider />
</>
)
})}
</List>
</Collapse>
</>
)
}) : null}
You can map over the values when they are present like so. If you are not planning on displaying a Loading screen in the process of waiting for the data then this would work. Otherwise use a ternary operator like the other answer.
{filtros && filtros.map((item, index) => {
return (
<>
<ListItem
button
onClick={() => setOpen({ [item]: !open[item] })}
key={item}
>
<ListItemText primary={item} />
{open[item] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[item]} timeout='auto'>
<List component='div' disablePadding>
{valoresDosFiltros[index].map((filtro) => {
return (
<>
<ListItem key={filtro}>
<p>{`${filtro}\n`}</p>
<ListItemSecondaryAction>
<Checkbox
label={filtro}
key={filtro.toString()}
color='primary'
onChange={() => handleChecked(filtro)}
checked={checked[filtro]}
/>
</ListItemSecondaryAction>
</ListItem>
<Divider />
</>
)
})}
</List>
</Collapse>
</>
)
})}
While rendering the component you have to check data in filtrosPorTipo. It has an array value or not. Like below:
const List = (filtrosPorTipo) => {
if (filtrosPorTipo && filtrosPorTipo.length > 0) {
let filtros = filtrosPorTipo[0]
let valoresDosFiltros = filtrosPorTipo[1]
let lista = (
<List>
{filtros.map((item, index) => {
return (
<>
<ListItem
button
onClick={() => setOpen({ [item]: !open[item] })}
key={item}
>
<ListItemText primary={item} />
{open[item] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[item]} timeout='auto'>
<List component='div' disablePadding>
{valoresDosFiltros[index].map((filtro) => {
return (
<>
<ListItem key={filtro}>
<p>{`${filtro}\n`}</p>
<ListItemSecondaryAction>
<Checkbox
label={filtro}
key={filtro.toString()}
color='primary'
onChange={() => handleChecked(filtro)}
checked={checked[filtro]}
/>
</ListItemSecondaryAction>
</ListItem>
<Divider />
</>
)
})}
</List>
</Collapse>
</>
)
})}
</List>
)
return lista
}
return 'No data available!'
}

categories and sub categories in ReactJS

Hello I'm trying to make a sidebar menu using material ui
This sidebar menu contain categories and there sub categories.
I have code this:
What I'm trying to make ?
I take some categories data from my Laravel API, on each categories they can have an object of sub categories, and I collapse this to show the sub categories from the parent category
If I collapse one every one collapse, this is normal because they share the same state, but I don't know how to make one state for each parent categories
const categoriesList = this.state.categories.map((item, k) => {
return (
<React.Fragment key={k}>
<ListItem button onClick={this.handleClick}>
<ListItemText primary={item.label} />
{item.category !== null ? this.state.open ? <ExpandLess /> : <ExpandMore /> : null}
</ListItem>
{item.category !== null ? <>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{item.category.map((ite,l) => <ListItem key={l} button className={classes.nested}><ListItemText primary={ite.label} /></ListItem>)}
</List>
</Collapse>
</> : null}
</React.Fragment>
)
})
``
I would recommend that you create a component for each category. So instead you would have:
const categoriesList = this.state.categories.map((item, k) => {
return <Category key={k} {...item} />;
});
And elsewhere in your code you'd have another Component:
const Category = (props) => {
const [open, setOpen] = useState(false);
function handleClick(e) { ... }
return (
<React.Fragment>
<ListItem button onClick={handleClick}>
<ListItemText primary={props.label} />
{props.category !== null ? open ? <ExpandLess /> : <ExpandMore /> : null}
</ListItem>
{item.category !== null ? <>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{props.category.map((ite,l) => <ListItem key={l} button className={classes.nested}><ListItemText primary={ite.label} /></ListItem>)}
</List>
</Collapse>
</> : null}
</React.Fragment>
);
}
Then the state is contained with the Category component, and you can keep your container component simple.
[note] I prefer function components, so used that here, but a Class Component wouldn't change this answer.
This is my parent component with hook
first time I use hooks
import React, {useState} from 'react';
import ListItem from "#material-ui/core/ListItem";
import ListItemText from "#material-ui/core/ListItemText";
import ExpandLess from "#material-ui/icons/ExpandLess";
import ExpandMore from "#material-ui/icons/ExpandMore";
import Collapse from "#material-ui/core/Collapse";
import List from "#material-ui/core/List";
export function Category(props){
const [open, setOpen] = useState(false);
let handleClick = () => {
setOpen(!open)
}
return (
<React.Fragment key={props.id}>
<ListItem button onClick={handleClick}>
<ListItemText primary={props.categorie.label} />
{props.category !== null ? open ? <ExpandLess /> : <ExpandMore /> : null}
</ListItem>
{props.category !== null ? <>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{props.category.map((ite,l) => <ListItem key={l} button className={props.classes.nested}><ListItemText primary={ite.label} /></ListItem>)}
</List>
</Collapse>
</> : null}
</React.Fragment>
)
}

Loading React component from another file

I am using the React Material-UI library. I have a search 'filter' on the main/parent page, which should pop open a Drawer that is located in a separate file.
I understand how this all works within one file, but I cannot understand how to break this into separate files (obviously for code clarity intent). I also cannot tell how I get the 'variables' out of the Drawer for items I select. Below I have pasted my two files, whereby I would like to get the 'onclick' in the parent to launch the Drawer in the child file. Any assistance would be excellent!
My parent file:
return (
<Autocomplete
id="search"
...
renderInput={(params) => (
<TextField
{...params}
label="Search for an item"
variant="outlined"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<IconButton color="primary" aria-label="filters" component="span">
<TuneRoundedIcon onClick={ handleFilterOpen } />
</IconButton>
<Filter open={ openFilter} />
</InputAdornment>
),
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
fullWidth
/>
)}
And this is the Filter.tsx (my child file):
export default function Filter() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
return (
<Drawer
className={classes.drawer}
variant="persistent"
anchor="right"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</div>
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
);
}
You need to pass the open state down to the child component via props. The child component should not have an "open" state. I've simplified this for you for better understanding:
const Parent = () => {
const [open, setOpen] = React.useState(false);
const toggleOpen = () => {
setOpen(!open)
}
const customFunction(valueFromChildComponent) {
alert(valueFromChildComponent); // this alerts "myValue" since "myValue" is passed from child component
}
return (
<Child isOpen={open} myCustomFunction={customFunction} />
);
}
Child component
const Child = props => {
return (
console.log(props.isOpen) // props.isOpen contains the value passed down from the parent
<button onClick={props.myCustomFunction("myValue")}>test Button</button>
);
}
I've also added an example how you could pass up a value form your child component. in my case i passed up a string but you could for example pass up the selected value of a drop down or basically whatever you want.

Not apply dynamic class in react js rendering

I am applying class on condition based but it is not apply. But when I apply class name static then it is applied successfully.
const styles = theme => ({
labelsuccess: {
"background-color": "#5cb85c"
},
labelprogress: {
"background-color": "#f0ad4e"
}
});
let labelcolor = [
{
status: "In Progress",
class: "classes.labelprogress"
},
{
status: "Completed",
class: "classes.labelsuccess"
}
];
{Developertasklist.map((task, index) => (
<ListItem key={index} divider="true">
<div className={classes.taskwidth}>
<span className={classes.hideelement}>
{
(foundValue = labelcolor.filter(
obj => obj.status === task.status
)[0].class)
}
</span>
<ListItemText
primary={
<React.Fragment>
{task.name} - {task.due_date}
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
component="span"
className={foundValue}
color="textPrimary"
>
{task.status}
</Typography>
</React.Fragment>
}
/>
</div>
</ListItem>
))}
Why dynamic class does not apply?
set your variable before the return. Not inside.
with arrow functions, you doesn't need use return if you use brackets like this () => ( ... ), but if you want to set variable or calculating, use with curly brackets and return statement. like this;
() => {
const a = 'variable';
return ( <div class={a}>... );
}
try this one.
{Developertasklist.map((task, index) => {
const foundValue = labelcolor.filter(
obj => obj.status === task.status
)[0].class;
return (
<ListItem key={index} divider="true">
<div className={classes.taskwidth}>
<ListItemText
primary={
<React.Fragment>
{task.name} - {task.due_date}
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography
component="span"
className={foundValue}
color="textPrimary"
>
{task.status}
</Typography>
</React.Fragment>
}
/>
</div>
</ListItem>
)}
)}

Resources