Menu
For example, I wanna show a list of names. So I wanted to do something like this:
var returnValue; for (eachName of _names) { returnValue += ( <TouchableHighlight onPress={() => this._onPressButton}> <Text> {eachName} </Text> </TouchableHighlight>); } return returnValue; However, that is not valid. Which brings me to my question: How do I concatenate a dynamic amount of JSX components in React Native.
307
To concatenate JSX elements into an array in React: Initialize an empty array. Use the push() method to push JSX elements into the array. Set the key prop on the outermost JSX element to a unique value.
Use the + operator to concatenate two string variables in React Native: const helloWorld = hello + world; Another version with a hardcoded string: const helloWorld2 = hello + 'World!
Use a template literal to concatenate a string in React props, e.g. <div className={ border ${myClass} }> . Template literals are delimited with backticks and allow us to embed variables and expressions using the dollar sign and curly braces ${expression} syntax.
What is JSX? JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
Figures I figure it out soon as I ask stackoverflow. The code needs to be put into an array:
var returnValue = []; for (var i = 0; i < _names.length; i++) { returnValue.push( <TouchableHighlight onPress={() => this._onPressButton}> <Text> {_names[i]} </Text> </TouchableHighlight>); } return returnValue; There is also more information here: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
111
Maybe a more elegant way:
return <View> {_names.map((eachName) => { return ( <TouchableHighlight onPress={() => this._onPressButton}> <Text> {eachName} </Text> </TouchableHighlight> ); })} </View> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
