# Fetching Data from an API

## Fetching Data from an API

&#x20;Working with API in React using the native `fetch` function and the [Star Wars API](https://swapi.co)

```jsx
import React, {Component} from "react"

class App extends Component{
    constructor(){
        super()
        // Initializing State
        this.state = {
            charachter: {},
            isLoading: true
        }
    }
    
    // Fetching Data from Api
    componentDidMount(){
        fetch("https://swapi.dev/api/starships/10/")
        .then(response => response.json())
        .then(data => {
            this.setState({
               charachter: data,
               isLoading: false 
            })
            // this will provide the json file with all the data requested 
            console.log(data)
        })
    }
    
    render(){
        // Accessing json Data through Individual Property
        const info = `Ship: ${this.state.charachter.name}. Model: ${this.state.charachter.model}`
        const text = this.state.isLoading ? "Loading...." : info
        return (
            <p>{text}</p>
        )
    }
}

export default App

```
