CODEWITHSUNDEEP
react-nativejsx
Karlth
Karlth

Reputation: 3275

Is it possible to dynamically work with JSX in React Native?

I've been working with JSX to render layouts in React Native. Is it possible to dynamically create the JSX instead of hardcoding it? Or is it better to use something else than JSX?

render() {
    return (
      <TouchableHighlight>
        <View>
          <View style={styles.rowContainer}>
              <Text style={styles.price}>{item.Caption}</Text>
              <Text style={styles.title}>{item.TextBody}</Text>
          </View>
          <View style={styles.separator}/>
        </View>
      </TouchableHighlight>
    );
}

For example if I wanted to add an additional <Text>{item.IsFinished}</Text> element after the other <Text> elements (if the data needed it), how could I do that inside the render function?

Upvotes: 0

Views: 46

Answers (1)

Elroy
Elroy

Reputation: 101

Yes, could do something like {(condition here) && <Text>{item.IsFinished}</Text>}

Full code: 

render() {
  return (
    <TouchableHighlight>
      <View>
        <View style={styles.rowContainer}>
          <Text style={styles.price}>{item.Caption}</Text>
          <Text style={styles.title}>{item.TextBody}</Text>
          {item.IsFinished && <Text>{item.IsFinished}</Text>}
        </View>
        <View style={styles.separator}/>
      </View>
    </TouchableHighlight>
  );
}

Upvotes: 1

Related Questions