React FUNdamentals, Step 2 - Query Field Exercise

App.js

import React, { useState } from 'react'

const App = () => {
  const [inputValue, setInputValue] = useState('')
  const [isUpper, setIsUpper] = useState(false)

  return (
    <main>
      <h1>Giphy Search!</h1>

      <form>
        <input
          type="search"
          placeholder="Search Giphy"
          value={inputValue}
          onChange={(e) => {
            setInputValue(e.target.value)
          }}
        />
      </form>

      <p style={{ textTransform: isUpper ? 'uppercase' : undefined }}>
        You are typing <strong>{inputValue}</strong> in the field.
      </p>
      <button
        type="button"
        className="button"
        onClick={() => setIsUpper((prevIsUpper) => !prevIsUpper)}
      >
        To upper ({isUpper ? 'off' : 'on'})
      </button>
    </main>
  )
}

export default App