JSON Data Fetch in Custom way

JSON Data Fetch in Custom way  


Data.js

export const Book = [
    {
        id: 1,
        name: "JavaScript",
        price: 200
    },{
        id: 2,
        name: 'React Native',
        price: 2000
    },
    {
        id: 3,
        name: "Node.js",
        price: 40
    }

]

_____________________________________________________________________________

App.js


import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';
import { Book } from './Data'

//Custom Component 

class Custom extends Component{
  renderData = data=>{
    return data.map((item, index)=>{
      return<View key={index}>
        <Text>{item.id}-{item.name}</Text>
      </View>
    })
  }
  render(){
    return(
      <View>
      {this.renderData(this.props.data)}
      </View>
    );
  }
}


class Home extends Component {
  render() {
    return (
      <View>
       <Custom data={Book}/>
      </View>
    );
  }
}
export default class App extends Component {
  render() {
    return (
      <View>
        <Home/>
      </View>
    );
  }
}

...................................................................................................................................................................................................................................
Example : # 2 [GET]

import React, { Component } from 'react'
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      items: []
    }
  }
  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json()) //<-- json format
      .then(responseJson => {
        this.setState({
          loading: true,
          items: responseJson
        })
      })
  }

  render() {
    var { loading, items } = this.state
    if (!loading) {
      return <div>Loading...</div>
    } else {
      return (
        <div>
          <ul>
            {items.map(item => (
              <li key={item.id}>
                Name: {item.name} | Email: {item.email}
              </li>
            ))}
          </ul>
        </div>
      )
    }
  }
}
export default App
................................................................................................................................................................................................................................
Example : # 3[POST]

import React, { Component } from 'react'

class App extends Component {
  async PostData() {
    try {
      let result = await fetch('https://webhook.site/1544ea3e-30c2-416f-b8c5-15c712cc739e', {
        method: 'post',
        mode: 'no-cors',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Charset':'utf-8'
        },
        body: JSON.stringify({
          key1: 'myusername',
          email: 'mymail@gmail.com',
          name: 'Johan',
          lastname: 'Doe',
          age: 12
        })
      })
      console.log('Results: ' + result)
    } catch (e) {
      console.log(e)

    }
  }

  render() {
    return (
      <div>
        <h1>Post Data</h1>
        <button onClick={() => this.PostData}>Press Me to Post Data</button>
      </div>

    )
  }
}
export default App


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