React sub count

import React,{useState} from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Form } from "react-bootstrap";

const youtubeChannelId = require('get-youtube-channel-id')

export default function App() {

  const API_KEY = "###yourapikey###"

  const [subscribers,setSubscribers] = useState(null)
  const [views,setViews] = useState(null);
  const [videos,setVideos] = useState(null)

  const [url,setUrl] = useState(null)

  const handleSubmit = async (e) => {

    e.preventDefault()

    const result = await youtubeChannelId(url)
    fetch(`https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${result.id}&key=${API_KEY}`)
    .then((data) => data.json())
    .then((result) => {
      console.log(result)
      setSubscribers(result.items[0].statistics.subscriberCount)
      setViews(result.items[0].statistics.viewCount)
      setVideos(result.items[0].statistics.videoCount)
    })

    

    console.log(result)
    
  }

  

  const handleChange = (e) => {
   
    setUrl(e.target.value)
  }

  return (
    <div className="App">
      <br />
      <br />
      <Form onSubmit={handleSubmit}>
        <Form.Group controlId="channelUrl">
          <Form.Label>Channel URL:</Form.Label>
          <Form.Control type="text" name="url"
          onChange={handleChange} value={url} required placeholder="Enter Channel URL" />
        </Form.Group>
        <Button variant="primary" type="submit">
          Submit
        </Button>
      </Form>
      You have {subscribers} subscribers
      <br/>
      You have {videos} Videos
      <br/>
      You have {views} Views
    </div>
  );
}

Source: codingshiksha.com

Similar codes

0 vote128 views1 answer
How to send data to another page in react from button
Javascript React
3 votes108 views1 answer
React data attributes event
Javascript React
0 vote107 views1 answer
Uploading profile pic with react.js node.js express.js REST API to sqlite DB
Javascript React
0 vote119 views1 answer
How to disable button if errors object isnt empty in react hook form
Javascript React
-1 vote104 views2 answers
3 dots React
Javascript React
0 vote93 views2 answers
Can we use .env in react native?
Javascript React
1 vote106 views1 answer
Reactive localstorage in react
Javascript React
0 vote153 views1 answer
When reload the page the route gone in react js laravel
Javascript React
0 vote122 views1 answer
React nativ export default
Javascript React
8 votes101 views2 answers
Useref in react typescrpt
Javascript React