Dynamically rendering components - React Native

Question

I'm pretty confused with the react-native syntax. I was trying to dynamically render a wrapper (CardSection) if numberChildrenLabel is > 0. Then depending on the number children I want to render x number of components. What I'm doing currently doesn't work and I think it's a pretty messy (even if I do fix the syntax errors). What is the best way of rendering multiple components based on an input?

render(){
    return(
          ...
          {
          this.state.numberChildrenLabel > 0 ?
          <CardSection>
            <Text style={{ flex: 2}}>Children age:</Text>
            <View style={{ flex: 3}}>
              {
                for(var i=0; i<this.state.numberChildrenLabel; i++){
                  return(
                    <Text>child{i}</Text>
                  );
                }
              }
            </View>
          </CardSection>
          :
          <View/>
          }
          ...
    );
}

Wickramaranga · Accepted Answer · 2017-09-27 04:48:24Z

4

Inside brackets, you need an expression. What's inside for loop is a statement. Also, return outputs something from within a function; you cannot use it in this way.

I haven't tested the below code, but it should work.

render(){
        return(
              ...
              {
              this.state.numberChildrenLabel > 0 ?
              <CardSection>
                <Text style={{ flex: 2}}>Children age:</Text>
                <View style={{ flex: 3}}>
                  {
                    Array(this.state.numberChildrenLabel).fill().map((_, i) => i).map(i => <Text>child{i}</Text>)
                  }
                </View>
              </CardSection>
              :
              <View/>
              }
              ...
        );
    }

answered Sep 27, 2017 at 4:48

Wickramaranga

1,2412 gold badges24 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

Dynamically rendering components - React Native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related