is this the right way to fetch data while usine usestate hooks? i use usestate hook but i don't know if this the right way to fetch data

Question

i just wrote the code and fetch usestate data like that cause I didn't find some source to how doing it in the form section I use onChange={event => setFirstName(event.target.value)} I don't know where is the problem cause the data didn't show up in the database

function OrderCP(props) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [mobileNumber, setMobileNumber] = useState('');
  const [adress, setAddress] = useState('');
  const [city, setCity] = useState('');
  const [size, setSize] = useState('');
  const [quantity, setQuantity] = useState('1');






  function onOrderSubmit ()  {
  fetch('http://localhost:3000/orderCP', {
      method: 'post',
      mode: 'cors',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        firstname: setFirstName,
        lastname:setLastName,
        email: setEmail,
        mobilenumber: setMobileNumber,
        adress: setAddress,
        city: setCity,
        size:setSize,
        quantity: setQuantity

      })
    })
      .then(response => response.json())
      .then(user => {
        if (user.id) {
         return (
          this.props.loadUser(user),
         <Link to ='/orderCP/orderCompletedCP' /> )
        }
      })
  }

Answer 1

the "set" methods are functions to set the values of the useState variables.

For example

  const [firstName, setFirstName] = useState('')

the status of firstName is initial an empty string. To set the variable you call

setFirstName('newString')

after that you can use firstName to access the value.

You should change your body

`body: JSON.stringify({
    firstname: firstName,
    lastname:lastName,
    email: email,
    mobilenumber: mobileNumber,
    adress: address,
    city: city,
    size:size,
    quantity: quantity

  })`