/Javascript/React/React hooks port requst

React hooks port requst

export default function App() {
  const [data, setData] = useState([])
  const [formData, setFormData] = useState('')

  useEffect(() => {
    fetchGames() // Fetch games when component is mounted
  }, [])

  const fetchGames = () => {
    fetch('http://localhost:3000/game', {
      method: 'GET',
    })
      .then((res) => res.json())
      .then((result) => setData(result.rows))
      .catch((err) => console.log('error'))
  }

  const saveGames = () => {
    fetch('http://localhost:3000/game', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: formData, // Use your own property name / key
      }),
    })
      .then((res) => res.json())
      .then((result) => setData(result.rows))
      .catch((err) => console.log('error'))
  }

  const handleSubmit = (event) => {
    event.preventDefault()
    saveGames() // Save games when form is submitted
  }

  const handleChange = (event) => {
    setFormData(event.target.value)
  }

  return (
    <div className="App">
      {/* method="post" not needed here because `fetch` is doing the POST not the `form` */}
      {/* Also, note I changed the function name, handleSubmit */}
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" value={formData} onChange={handleChange} />
        <button type="submit">click</button>
      </form>

      {data &&
        data.map((element, index) => (
          <GameTestResult name={element.name} key={element.index} />
        ))}
    </div>
  )
}

Source: stackoverflow.com

Similar codes

2 votes259 views2 answers
Select option in reactive forms
Javascript React
0 vote135 views1 answer
Build function component react
Javascript React
0 vote134 views1 answer
How to draw a long underline in react native
Javascript React
0 vote110 views1 answer
Remove an item from a component in react
Javascript React
0 vote142 views1 answer
How to add autoserial number in react js
Javascript React
26 votes177 views6 answers
React redirect to url
Javascript React
0 vote133 views1 answer
Evaluating '_reactNativeImageCropPicker.default.openCamera
Javascript React
0 vote128 views1 answer
Shallow render in react
Javascript React
0 vote131 views1 answer
Ctx beginpath react
Javascript React
0 vote136 views1 answer
Error: Error: Unable to resolve module `react-native-gesture-handler` from `node_modules\@react-navigation\native\lib\module\Scrollables.js`: react-native-gesture-handler could not be found within the project.
Javascript React