import React, { Component } from 'react'
import 'react-tenor-gif-picker/dist/index.css'
import TenorGifPicker from 'react-tenor-gif-picker'

const App = () => {
  const [active, setActive] = React.useState(false)
  const tenorApiKey = 'TENOR_API_KEY'
  const [Gifs, setGifs] = React.useState([])

  return (
    <div>
      <button
        onClick={() => {
          setActive(true)
        }}
      >
        Show Picker
      </button>
      <TenorGifPicker
        tenorAccessKey={tenorApiKey}
        active={active}
        setActive={setActive}
        initialSearchQuery='Funny'
        onGifSelect={(gifData) => {
          let list = gifData ?? []
          list.push(gifData)
          setGifs(list)
          setActive(false)
        }}
      />
    </div>
  )
}