I have an error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

I'm new here on the site, this is my first comment. I have a problem that I can not solve. I'm new to React, I built a component, which gets from the redux an array called Categories.

I want to print this array as a list to the user.

That's what I'm trying to do, but I'm getting the error.

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';

//Redux
import { connect } from 'react-redux';
import { getCategories } from '../../redux/actions/dataActions';

function valuetext(value) {
  return `${value}`;
}

const styles = (theme) => ({
  ...theme.spreadThis
});

function PreferenceList(props) {
  const {
    classes,
    user: loading
    }
  } = props;
  const [filledCategories, setFilledCategories] = React.useState(props.categories);

  if (loading) {
    console.log ("nothing for now...");
  }

  const handleChange = (event, value) => {
    console.log("nothing for now...")
  };

  return (
    <React.Fragment>
      <List dense className={classes.root}>
        {props.data.categories.map((value, index) => {
          console.log(value);
          const labelId = `checkbox-list-secondary-label-${index}`;
          return (
            <ListItem key={value[Object.keys(value)[0]]} button>
              <ListItemText id={labelId} primary={`${Object.keys(value)[0]} with rating ${value.rating}`} />
              <ListItemSecondaryAction>
                <TextField
                  id={`input-${index}`}
                  name={`input-${index}`}
                  type={`input-${index}`}
                  label={`input-${index}`}
                  value={filledCategories[index]}
                  onChange={handleChange(index)}
                  inputProps={{ 'aria-labelledby': labelId }}
                  fullWidth
                />
              </ListItemSecondaryAction>
            </ListItem>
          );
        })}
      </List>
    </React.Fragment>
  );
}

const mapStateToProps = (state) => ({
  user: state.user,
  data: state.data
});

export default connect(
  mapStateToProps, { getCategories }
)(withStyles(styles)(PreferenceList));

I do not so much understand where the error is, I'm new to this whole thing. My assumption is that I'm probably doing too much refreshing the page for some reason. But I do not know how to prevent it. It's hard for me

Answer 1

Change onChange inside TextField component into arrow function. In your case handleChange is called infinite amount of times.

onChange={() => handleChange(index)}

Answer 2

I solved the issue by adding a key to the component. I was getting the same error but I had a slightly different problem. when I select an element from a list that opens a new display there was a textarea. Since they were identical in the render tree it would throw an error. so adding a key solved the issue. hope this helps someone.