Reputation: 92
I have a problem about the flex row in react native so the thing is I need to use only one json data file to generate the list. However, I really cannot figure out how.
I just created 2 separate json but the problem is they just listing with delay one to another. And I want only one.
export default class Detay extends React.Component {
constructor(props) {
super(props);
this.state = {
ApiTitle: [],
ApiTitle2: []
}
}
componentDidMount() {
axios.get('http://oyleboyle.com/data.json')
.then(response => {
this.setState({ ApiTitle: response.data.aparatifler });
})
.catch(error => {
console.log(error);
});
axios.get('http://oyleboyle.com/data2.json')
.then(response => {
this.setState({ ApiTitle2: response.data.aparatifler });
})
.catch(error => {
console.log(error);
});
}
renderItem(){
}
render() {
return (
<View style={{backgroundColor: "white"}}>
<ScrollView>
<View style={styles.flexview}>
<View>{this.state.ApiTitle.map((id, i)=>
<Urun title={id.title} image="https://nelazimsa.carrefoursa.com/wp-content/uploads/2018/03/turk-kahvesi.jpg" fiyat="12"/>
)}
</View>
<View>{this.state.ApiTitle2.map((id, i)=>
<Urun title={id.title} image="https://nelazimsa.carrefoursa.com/wp-content/uploads/2018/03/turk-kahvesi.jpg" fiyat="12"/>
)}
</View>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
flexview: {
flex: 1, flexDirection: 'row' ,
marginTop: 10 ,
justifyContent:'space-around'
},
img: {
width: 280,
height: 280,
alignItems: 'center',
overflow: 'hidden'
},
titlee: {
textAlign: 'center',
color: 'red',
fontSize: 18
},
fiyatt: {
textAlign: 'center',
marginTop: 5
},
sepett: {
color: 'white' ,
textAlign: 'center',
marginTop: 5,
fontSize: 22 ,
backgroundColor: 'red',
borderRadius: 7
},
kart: {
borderRadius: 8,
padding: 5
}
});
I'm using row and I need two columns listing at the same with only 1 json file
Upvotes: 1
Views: 178
Reputation: 10709
You can merge your two arrays to one by doing the following:
//copy the old state of ApiTitle and add new items from response.data
this.setState({ ApiTitle: [...this.state.ApiTitle, ...response.data.aparatifler]});
Full Code:
componentDidMount(){
axios.get('http://oyleboyle.com/data.json')
.then(response => {
// here we are copying the content of ApiTitle and the content of repsonse.data together
this.setState({ ApiTitle: [...this.state.ApiTitle, ...response.data.aparatifler]});
})
.catch(error => {
console.log(error);
});
axios.get('http://oyleboyle.com/data2.json')
.then(response => {
// here we are copying the content of ApiTitle and the content of repsonse.data together again
this.setState({ ApiTitle: [...this.state.ApiTitle, ...response.data.aparatifler]});
})
.catch(error => {
console.log(error);
});
}
Your combined array can then be visualized with a FlatList.
renderItem(item, index) {
// render your items in return
return (
<View key={index} style={{flex: 1}}>
<Text> id: {item.id} </Text>
<Text> titel: {item.title} </Text>
<Text> fiyat: {item.fiyat} </Text>
</View>
)
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.ApiTitle}
numColumns={2}
renderItem={({ item, index }) => this.renderItem(item, index)}
/>
</View>
);
}
Demo Output:
Working Example:
https://snack.expo.io/Bk95rc_nE
Upvotes: 1