0

I was searching for a method to render a custom variable which I set from a function that I call whenever the Card button is clicked, that variable goes onto the body of a Modal which should dynamically contain the value of that specific variable.

The main component that contains everything:

export function OrdiniPrecedenti({ navigation }) {
const [visible, setVisible] = useState(false);
var egDetails = ""

function showModal(details){
 setVisible(true)
 egDetails = details
}

const hideModal = () => setVisible(false);
const containerStyle = { backgroundColor: 'black', padding: 20 };

return (
<Provider>
  <View style={{ flex: 1, justifyContent: 'center' }}>
    
    <HeaderBar svgicon={BackArrow} funct={navigation.goBack} titletext="Ordini recenti"></HeaderBar>
    
    <CardHistory text="I tuoi ordini recenti" paragraph="Qui saranno visualizzati tutti i tuoi ordini recenti" ></CardHistory>
    
    <CardHistory text="Ordine #0001"
      paragraph="Ristorante MA Sushi Milazzo"
      indirizzo="Vico del Pittore, 32, 98057 Milazzo ME"
      btntext="Visualizza dettagli ordine"
      btfn={showModal("Hello")}>
    </CardHistory>

    <CardHistory text="Ordine #0002"
      paragraph='Pizzeria "Verace Elettrica"'
      indirizzo="Via Firenze, 98057 Milazzo ME"
      btntext="Visualizza dettagli ordine"
      btfn={showModal("Hellu")}>
    </CardHistory>

    <Portal>
      <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
        <Text style={{ color: 'black' }}>
          <CardHistory text={egDetails}>
          </CardHistory>
        </Text>
      </Modal>
    </Portal>

  </View>
</Provider>
);
}

Now, as you can see I have the egDetails variable whose value is set from that call I do in btfn prop. Then, if I launch the app, what I get is a Too many re-renders. Error which I tried to fix in a lot of ways but in the end I couldn't get rid of it. Here is the CardHistory component if needed:

export function CardHistory({ text, btntext, btfn, paragraph, indirizzo }) {
return (
<View>
  <Card>
    <Card.Content>
      <Title>{text}</Title>
      <Paragraph>{paragraph}</Paragraph>
      <Paragraph>{indirizzo}</Paragraph>
    </Card.Content>
    <Card.Actions>
      <Button onPress={btfn}>{btntext}</Button>
      <Button></Button>
    </Card.Actions>
  </Card>
</View>
);
}

ps: (sorry for bad indent, first time formatting js code for StackOverflow :))

Fabrizio Piperno
  • 47
  • 1
  • 7

1 Answers1

0

Find which component is causing too many rerenders by counting the renders.

Conditionally render some component wiht

<>
{isReadyToRender && <ComponentThatRendersTooManyTimesIfPropsChange />}
</>
Jkarttunen
  • 6,764
  • 4
  • 27
  • 29