check if a column exists in a SQL Server table

Dynamically change YouTube video through ID in reactJS

Anderson

I am new to React. Currently, I am trying to build an app that has an iframe and a text field, and a button. The text field will allow users to change videos using Youtube video ID. Here I used two dependencies, react-youtube and get-youtube-id. I have followed the usage instruction of react-youtube npm but the console is throwing an error. I have tried removing

onReady={this._onReady} this particular code, only now the iframe flashes and disappears.

enter image description here

import React, { useState } from "react";
import YouTube from "react-youtube";
var getYouTubeID = require("get-youtube-id");

function App() {
  const [id, setId] = useState("");

  function handleChange(e) {
    console.log(e.target.value);

    setId(getYouTubeID(e.target.value));
  }

  const opts = {
    height: "390",
    width: "640",
    playerVars: {
      autoplay: 0
    }
  };

  return (
    <div className="App bg-navy">
      <div className="container py-5">
        <div className="row">
          {/*--- iFrame Column ---*/}
          <div className="border-5 border-info">
            <YouTube videoId={id} opts={opts} />
          </div>
          {/*--- Buttons and Search Input Column ---*/}
          <form>
            <div className="form-group">
              <input
                type="text"
                onChange={handleChange}
                required
                placeholder="Enter Video URL"
              />
            </div>
            <button type="submit" className="btn btn-info">
              Change
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

codesandbox link