Axios example

yarn install axios

Example | React Native -1

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import axios from 'axios'


export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            Value: []
        }
    }
        componentDidMount() {
            axios.get(`https://jsonplaceholder.typicode.com/users`)
                .then(res => {
                    console.log(res)
              //console.log(res.data.movie)    // similar way to defince

                    this.setState({ Value: res.data })
                })
        }


/**
`https://facebook.github.io/react-native/movies.json`

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1977" },
    { "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
    { "id": "3", "title": "The Matrix", "releaseYear": "1999" },
    { "id": "4", "title": "Inception", "releaseYear": "2010" },
    { "id": "5", "title": "Interstellar", "releaseYear": "2014" }
  ]
}

*/


        render() {
            const { Value } = this.state
            return (
                <View>
                    <Text style={{ fontSize: 30 }}>Hello Sapan</Text>
                    {Value.map((item => (
                        <View key={item.id}>
                            <Text style={{ fontSize: 30 }}>{item.name}</Text>
                        </View>
                    )))}
                </View>
            )
        }
    }

.....................................................................................................................................................
Example | React Native -2

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import axios from 'axios'
import ListData from './src/components/Hello'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            people: []
        }
        this.getPeople = this.getPeople.bind(this)
    }

    getPeople() {
     axios.get(`https://swapi.co/api/people`)
            .then(res => {
                console.log(res)
                // console.log(res.data.results)
                this.setState({ people: res.data.results})
            })
    }
    componentDidMount(){
        this.getPeople()
    }
    render() {
        const { people } = this.state        
            
        return (
            <View>
               <ListData people={people}/>
            </View>
        )
    }
}

import React, { Component } from 'react'

import { View, Text } from 'react-native'

class ListData extends Component{

    render(){

        const people= this.props.people

        return(

            <View>

                {

                    people.map((item)=>(

                        <View key={item.id}>

                            <Text>{item.name}</Text>

                        </View>

                    ))

                }

            </View>

        )

    }

}

export default ListData

..............................................................................................................................................................

Example | React

import React, { Component } from 'react'
import { View, Text, ActivityIndicator } from 'react-native'
import axios from 'axios'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            posts: []
        }
    }
    componentDidMount() {
        return axios.get('https://jsonplaceholder.typicode.com/posts')
            .then(res => {
                console.log(res)
                this.setState({
                    posts: res.data.slice(0, 10)
                })
            }
     )}

    render() {
        const { posts } = this.state

       // const postList =posts.length ? ():()

        const postList = posts.length ? (
            posts.map(item => {
                return (
                    <Text key={item.id}>{item.title}{item.body}</Text>
                )
            })

        )     :    (<Text style={{ fontSize: 30 }}>loading</Text>)

        return (
            <View>
                <Text>{postList}</Text>
            </View>
        )
    }
}
..............................................................................................................................................................................................................

Example 2


import React, { Component } from 'react'
import axios from 'axios'
class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            people: []
        }
    }
    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                console.log(res)
                this.setState({ people: res.data })
            })
    }
    render() {
        return (
            <ul>
                {this.state.people.map((item) =>
                    <li key={item.id}>{item.name}</li>
                )}
            </ul>
        )
    }
}



class PersonInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ''
        }
    }
handleChange=(event)=>{
   this.setState({name: event.target.value}) 

}

    handleSubmit = (event) => {
        event.preventDefault()
        const user={
           name: this.state.name
        }
        axios.post(`https://jsonplaceholder.typicode.com/users`,{user})
        .then(res=>{
            console.log(res)
            console.log(res.data)
        })
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>Person Name:
                    <input type='text' name='name' onChange={this.handleChange}></input>
                </label>
            </form>
        )
    }
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Home />
                <PersonInput />

            </div>

        )
    }

}