I have a small experiment I need help with. As I am not familiar with react.js, I would like to convert my main.jsx file into pure HTML/CSS/JS without using react. The issue I'm facing is how to handle form data submission to the server in vanilla HTML. Can it be done using the data-value attribute?
Main.jsx File:
import React from "react";
import { useState } from "react";
import { Link } from "react-router-dom";
import styles from "../styles/Main.module.css";
const FIELDS = {
NAME: "name",
ROOM: "room",
};
const Main = () => {
const { NAME, ROOM } = FIELDS;
const [values, setValues] = useState({ [NAME]: "", [ROOM]: "" });
const handleChange = ({ target: { value, name } }) => {
setValues({ ...values, [name]: value });
};
const handleClick = (e) => {
const isDisabled = Object.values(values).some((v) => !v);
if (isDisabled) e.preventDefault();
};
return (
<div className={styles.wrap}>
<div className={styles.container}>
<h1 className={styles.heading}>Join</h1>
<form className={styles.form}>
<div className={styles.group}>
<input
type="text"
name="name"
value={values[NAME]}
placeholder="Username"
className={styles.input}
onChange={handleChange}
autoComplete="off"
required
/>
</div>
<div className={styles.group}>
<input
type="text"
name="room"
placeholder="Room"
value={values[ROOM]}
className={styles.input}
onChange={handleChange}
autoComplete="off"
required
/>
</div>
<Link
className={styles.group}
onClick={handleClick}
to={`/chat?name=${values[NAME]}&room=${values[ROOM]}`}
>
<button type="submit" className={styles.button}>
Sign In
</button>
</Link>
</form>
</div>
</div>
);
};
export default Main;