Form submission in react

import React, {useState, useEffect} from 'react';

import Axios from 'axios'

function App() {

  const [ name, setName] = useState('')

  const [age, setAge] = useState(0)

  const [friends, setFriends] = useState([])


  const addFriend = () => {

    Axios.post('https://mern-pedro.herokuapp.com/addfriend', {

      name, age

    }).then((response)=> {

      setFriends([...friends, { _id: response.data._id,

        name: response.data.name, age: response.data.age}])

      setName('')

      setAge(0)

    }).catch(()=> {

      alert("it didn't work")

    })

  }

  useEffect(()=> {

    Axios.get('https://mern-pedro.herokuapp.com/read')

    .then((response)=> {

      setFriends(response.data)

    }).catch(()=> {

      console.log("error");

    })

  }, [])




  return <div className='App'>

    <div className= 'inputs'>

      <form onSubmit={addFriend}>

        Name:

      <input type='text' placeholder= 'Friend name...' 

      onChange={(event)=> setName(event.target.value)} value={name}/>

      Age:

      <input type='number' placeholder= 'Friend age...' 

      onChange={(event)=> setAge(event.target.value)} value={age}/>

      <button>Add a friend</button>

      </form>

    </div>

  </div>

}

export default App;

I have an App.js as shown above in my react app. While using tag the values are not updated. But if i avoid tag and add the same function reference on button it works. like . This works well on local server also with form tag. Need some suggestions regarding this. Thanks.

Nijo

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile: