Search code examples
javascriptreactjsreact-nativeaxiosreactjs-flux

Connecting json page to and flex row in React-native


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


Solution

  • 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:

    demo

    Working Example:

    https://snack.expo.io/Bk95rc_nE