I want to replace the number
in lines 9 and 14 (content.card1.)
the 1 after the "card' with the
variable "i" from the for loop.
I haven't thought of anything yet.
Is that possible at all? It would
be a great help to me.
Johann
Thanks for helping!
App.js
function App() {
const content = require('./content.json')
var cards = [];
for (let i = 0; i < 4; i++) {
cards.push(
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{content.card1.title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{content.card1.content}
</Text>
</View>
</View>
);
}
return(
<ScrollView horizontal={ true } pagingEnabled={ true } showsHorizontalScrollIndicator={ false }>
{cards}
</ScrollView>
);
}
const styles = require('./style');
export default App;
content.json
{
"cards" : 4,
"card1": {
"type" : "textonly",
"title" : "Card 1",
"content" : "Some Text 1"
},
"card2": {
"type" : "task",
"title" : "Card 2",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
"card3": {
"type" : "task",
"title" : "Card 3",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
"card4": {
"type" : "textonly",
"title" : "Card 4",
"content" : "Some Text 4"
}
}
You want to use dynamic keys (i.e. Computed Property Names) and generate keys "card1", "card2", etc. Using indices [1-4] you want to compute card numbers [1-4], i.e. content[`card${i}`].
const content = require('./content.json');
function App() {
const cards = [];
for (let i = 1; i <= 4; i++) {
cards.push(
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{content[`card${i}`].title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{content[`card${i}`].content}
</Text>
</View>
</View>
);
}
return(
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
>
{cards}
</ScrollView>
);
}
Since you've control over the content.json I would suggest reformatting the data to be easier to render.
{
"length" : 4,
"cards": [
{
"type" : "textonly",
"title" : "Card 1",
"content" : "Some Text 1"
},
{
"type" : "task",
"title" : "Card 2",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
{
"type" : "task",
"title" : "Card 3",
"content" : {
"items" : 2,
"step1" : "step1 title",
"step2" : "step2 title"
}
},
{
"type" : "textonly",
"title" : "Card 4",
"content" : "Some Text 4"
}
],
}
Then your code can simply map the data to JSX directly.
const content = require('./content.json');
function App() {
const cards = [];
for (let i = 1; i <= 4; i++) {
cards.push(
);
}
return(
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
>
{content.cards.map((card, i) => (
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{card.title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{card.content}
</Text>
</View>
</View>
))}
</ScrollView>
);
}
If I got your question correctly, you can use this way.
for (let i = 0; i < 4; i++) {
cards.push(
<View style={styles.card} key={i}>
<View style={styles.TitleBox}>
<Text style={styles.title}>
{content.card[i].title}
</Text>
</View>
<View style={styles.ContentBox}>
<Text>
{content.card[i].content}
</Text>
</View>
</View>
);
}
I think you can replace content.card1.content with a dynamic variable using square bracket notation and a template literal like this:
{content[`card${i}`].content}
The template literal (backticks) allows us to concatenate the keyword card and the loop index i. The square bracket notation then allows us to use the concatenated string as an object property reference.