React button not clickable-CodePudding

Hi everyone I'm building a simple waitlist page in React. In the Hero section, i've created a heading with an H1 and a form. The input form is working perfectly, the css is being activated when I focus and the state is being managed correctly. However, for some reason, the react button in the form is not clickable. Can anyone please advise?

import React from 'react'
import './Hero.css'
import prlearn_logo from '../assets/prlearn_logo.png'
import { useState } from 'react'
import axios from 'axios'


function Hero(){

    //managing state of input field
    const [input, setInput] = useState('')

    const handleSubmit = (e) => {
        e.preventDefault()

        axios.post('https://sheet.best/api/sheets/c440c559-1f29-430e-9662-660693fecbbd,input')
        .then(response => {
            console.log(response)
        })
    }

    return (
        <div className="container">
            <div className="heading">
                <img className ="logo" src={prlearn_logo} alt="prlearn_logo" />
                <h1 className="h1">Learn Spanish from native speakers and support the local community.
                <br/> 
                <span>Feel at home by removing the language barrier.</span>
                </h1>
            </div>
            <div className="waitlist">
                <form onSubmit={handleSubmit}>
                    <input 
                        type="text"
                        className="input-field"
                        placeholder="Enter email address"
                        required
                        value={input}
                        //changes input in state function
                        onChange={(e) => setInput(e.target.value)}
                    />
                    <button type="submit" className="button">Join The Waitlist</button>
                </form>
            </div>  
        </div>
    )
}

export default Hero

CodePudding user response：

The button works well. Maybe you should see the axios petition. https://codesandbox.io/s/silent-cherry-rqbn52?file=/src/App.js

CodePudding user response：

Button is working correctly there is a typo in your code. While calling the Api you are making request to the wrong url. Instead of making request to this:>

axios.post('https://sheet.best/api/sheets/c440c559-1f29-430e-9662-660693fecbbd,input')
    .then(response => {
        console.log(response)
    })

Try this

axios
.post('https://sheet.best/api/sheets/c440c559-1f29-430e-9662- 
          660693fecbbd')
        .then((response) => {
            console.log(response);
        });

CodePudding user response：

Button is working fine. I'm a novice developer and didn't realize you also had to manually include a cursor pointer to get the typical click effect. The axios post request is broken tho and I'm still working on this to complete form function.