A React form with controlled components holding data in state

Here’s the code for this page:

//src/pages/experiments/form.astro
---
import BaseLayout from '../../layouts/BaseLayout';
import Form from '../../components/Form.jsx';
---
<BaseLayout title="React Form">
<main>
<p>A React form with controlled components holding data in state</p>
<Form client:load />
</main>
</BaseLayout>

The code for the component will be added after I trouble shoot some Markdown rendering issues! :)

import React, { useState } from 'react';

const Form = () => {
const [data, setData] = useState({
name: "",  
language: "",
})

const handleChange = event => {
setData({...data, [event.target.name]: event.target.value})
}

const handleSubmit = (event) => {
event.preventDefault()
alert(\`Thanks, ${data.name}! I'll speak to you in ${data.language}.\`)
setData({ name: "",  language: ""})
}

return(
<>
<h3>My Form</h3>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">First name</label>
<br />
<input type="text" name="name" value={data.name} onChange={handleChange} />
</div>
<div>
<label htmlFor="language">Preferred language</label>
<br />
<input type="text" name="language" value={data.language} onChange={handleChange} />
</div>

<button>Submit</button>
</form>
</>
) 


}

export default Form