CheckBoxes React Native Map function returns error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

I have this code, that should draw checkbox'es.

here is my Hashtags.js file:

import React, { useState } from 'react';
import {StyleSheet, View, Image} from 'react-native';
import { CheckBox } from 'react-native-elements';
const HashtagsList =[
  {checked: false, title: '#tip1'},
  {checked: false, title: '#tip2'},
  {checked: false, title: '#tip3'},
  {checked: false, title: '#tip4'},
  {checked: false, title: '#tip5'},
  {checked: false, title: '#tip6'}, 
];

const Hashtags = props => { 
  const [hashtags, setHastags] = useState([]);
  setHastags(HashtagsList);

const toggleCheckbox = (title) =>{   
  const checkedHashtags = hashtags.find((hashtag) => hashtag.title === title);
  checkedHashtags.checked = !checkedHashtags.checked;
  const checkboxes = Object.assign({}, hashtags, checkedHashtags);
  setHastags({ checkboxes });
};

hashtags.map((hashtag, i) => {
  console.log(hashtag);
  return (
    <CheckBox
      key = {i}
      title = {hashtag.title}
      checkedIcon={<Image style={styles.chekBoxPic} source={require('../assets/svg/checked.svg')} />}
      uncheckedIcon={<Image style={styles.chekBoxPic} source={require('../assets/svg/unchecked.svg')} />}        
      checked={hashtag.checked}
      onPress={() => toggleCheckbox(hashtag.title)}
    /> 
    );
 })

};
const styles = StyleSheet.create({   
  chekBoxPic:{
    width: 22, 
    height: 22, 
  },
});
export default Hashtags;

My main.js page looks like this:

...
<View type={styles.someStyle}>
   <Hashtags />
  </View>
...

But i get error:'Too many re-renders. React limits the number of renders to prevent an infinite loop.' Where I make a mistake?

sushantdsuwal · Accepted Answer · 2020-01-03 16:24:38Z

2

I thinks its probably because of setHastags(HashtagsList) which cause Hashtags component to end up in an infinite loop.

you can initialize the initial HashtagsList like:

const [hashtags, setHastags] = useState(HashtagsList);

answered Jan 3, 2020 at 16:24

sushantdsuwal

1311 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nikobitan Over a year ago

Thank you very much! But now I get this error: Hashtags(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Why I get that? I have return statement, why it is null?

sushantdsuwal Over a year ago

I think it may be because you haven't return anything from your Hashtags component. you should wrap the hashtags.map function with a return statement. like this return( hashtags.map((item,i) =>{ return( "Checkbox logics here!!" ) } )

Nikobitan Over a year ago

Thank you so much!

Niekert · Accepted Answer · 2020-01-03 16:08:55Z

0

I think the problem is in the first few lines of your HashTags component:

const Hashtags = props => { 
  const [hashtags, setHastags] = useState([]);

  // Every time your react component re-renders, it sets the state
  // Of the hashtags. This causes the component to end up in an infinite loop
  setHastags(HashtagsList);
}

Instead of setting the initial hashtags separately, you can initialize it in the useState call, like this:

const Hashtags = props => { 
  const [hashtags, setHastags] = useState(HashtagsList);
}

answered Jan 3, 2020 at 16:08

Niekert

9471 gold badge9 silver badges21 bronze badges

1 Comment

Nikobitan Over a year ago

Thank you very much! But now I get this error: Hashtags(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Why I get that? I have return statement, why it is null?

Collectives™ on Stack Overflow

CheckBoxes React Native Map function returns error: Too many re-renders. React limits the number of renders to prevent an infinite loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related