complex_state.js

import { useState } from 'react'
import { Button } from '@chakra-ui/react'

const initialState = {
  age: 0,
  name: '',
  address: '',
  phoneNumber: '',
  location: '',
}
export default function ComplexState() {
  const [state, setState] = useState(initialState)
  const [responseMessage, setResponseMessage] = useState({
    isError: false,
    message: null,
  })

  function handleChange(event) {
    setState({ ...state, [event.target.name]: event.target.value })
  }

  function handleSubmit() {
    // console.table(state)
    fetch('http://localhost:3000/test/', {
      method: 'POST',
      body: JSON.stringify(state),
    })
      .then((res) =>
        setResponseMessage({
          ...responseMessage,
          message: 'Successfully submmitted to the server',
        }),
      )
      .catch((err) =>
        setResponseMessage({
          ...responseMessage,
          isError: true,
          message: err.message,
        }),
      )
  }

  return (
    <div>
      <br />
      <p style={{ color: responseMessage.isError ? 'red' : 'green' }}>
        {responseMessage.message}
      </p>
      {/* controlled input */}
      <input
        style={{ border: '1px solid ' }}
        value={state.age}
        onChange={handleChange}
        name="age"
      />
      <br />
      <br />
      <input
        style={{ border: '1px solid ' }}
        value={state.name}
        onChange={handleChange}
        name="name"
      />
      <br />
      <br />
      <input
        style={{ border: '1px solid ' }}
        value={state.address}
        onChange={handleChange}
        name="address"
      />
      <br />
      <br />
      <input
        style={{ border: '1px solid ' }}
        value={state.phoneNumber}
        onChange={handleChange}
        name="phoneNumber"
      />
      <br />
      <br />
      <input
        style={{ border: '1px solid ' }}
        value={state.location}
        onChange={handleChange}
        name="location"
      />
      <br />
      <Button type="button" variant="solid" onClick={handleSubmit}>
        submit
      </Button>
    </div>
  )
}