CODEWITHSUNDEEP
react-nativeaxios
just A
just A

Reputation: 9

Display datas with Axios (React Native)

I am trying to display data that I fetched with Axios. They came as an array. Because of this I cant show them. What should I do?

Here is my fetch code

componentDidMount() {
    axios.post('http://192.168.1.106:80/partner_project_backend/project_list.php')
    .then((response) => {
      console.log(response.data)
    })
    .catch((error) => {
      console.error(error);
    });
  }

Here is my console.log

enter image description here

Upvotes: 0

Views: 95

Answers (2)

nithinpp
nithinpp

Reputation: 2025

I'm guessing you are getting the API response correctly and your only intention is to display the data in your application. If so, you could use the FlatList component from React Native

import React from 'react';
import { FlatList, Text } from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    axios.get('http://192.168.1.106:80/partner_project_backend/project_list.php')
      .then((response) => {
        this.setState({ data: response.data });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
    return (
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Text>{item.name}</Text> // render your view here
        )}
        keyExtractor={item => item.id}
      />
    );
  }
}

React more about FlatList at https://reactnative.dev/docs/flatlist

Upvotes: 1

Mohamed Ahmed
Mohamed Ahmed

Reputation: 347

To fetch data you have to use get method NOT post

this.state ={ data : null }

componentDidMount(){
axios.get('http://192.168.1.106:80/partner_project_backend/project_list.php')
  .then((response) => {
    this.setState({ data : response.data })
    
  })
  .catch((error) => {
    console.error(error);
  });
}

Upvotes: 0

Related Questions