Can't add multiple lines of components into variable

Question

I want to save the content in a variable depending on the result of an if statement. But when I add multiple lines it doesn't work.

let content = null
if(this.props.group.name != null){
  content = <Text>Just this line works</Text>
              <Text>This doesn't work</Text>
}

I can't find out what to do. I can't add + at the end of the line like in Javascript.

Can't you just add it next to each other? Like this - content = <Text>Just this line works</Text> <Text>This doesn't work</Text> — Lian van der Vyver
– Lian van der Vyver, Commented Nov 10, 2016 at 13:11

BradByte · Accepted Answer · 2016-11-10 13:22:46Z

2

Components need to be wrapped in a parent containing component, unless you create it as an array with keys.

// this would work because it's wrapped inside parentheses and has a parent component
content = (
          <View>
            <Text>Just this line works</Text>
            <Text>This doesn't work</Text>
          </View>
          )

// this works because the components are an array
content = [
           <Text key="1">Just this line works</Text>,
           <Text key="2">This doesn't work</Text>
          ]

answered Nov 10, 2016 at 13:22

BradByte

11.1k2 gold badges41 silver badges42 bronze badges

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

2 Comments

Sinan Samet Over a year ago

Thank you that worked! I tried the parentheses but I didn't know you also needed to wrap it.

BradByte Over a year ago

@SinanSamet glad I could help!

Collectives™ on Stack Overflow

Can't add multiple lines of components into variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related