I've been coding for almost 4 months now, and during this time, I've become familiar with HTML, CSS, and JavaScript. Recently, I've started learning React. I wanted more experienced individuals to review my code and give me feedback to improve it. The code you see is for a registration page where users can enter their information, and it's sent to the server as a JSON file. As React tends to break things down into smaller components, I couldn't do this although the code produces the desired output. However, I want to refine it further to enhance my coding skills.
In this code, I've used Bootstrap, Tailwind, and Axios. Is it possible to transform this code into multiple components to make it cleaner? If so, what tools should I use? I appreciate any guidance you can provide.
import React, { useState } from "react";
import './Form.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios';
import AlertColors from '../Alert/AlertColors'
export default function Form (){
const [formData, setFormData] = useState({
first_name: '',
last_name: '',
year: '',
month: '',
day: '',
phone_number: '',
email: '',
username: '',
password: '',
rePassword: '',
});
const [errorOccurred, setErrorOccurred] = useState(false);
const [curred, setcurred] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('http://127.0.0.1:8000/accounts/api/registry/', formData, {
headers: {
'Content-Type': 'application/json'
}
});
setcurred(true)
} catch (error) {
setErrorOccurred(true)
}
};
return (
<div className="container">
<div className="row justify-content-center m-5">
<div className="col-md-6 alireza p-4 ">
{errorOccurred && <AlertColors color="red" text="A success alert for showing message." />}
{curred && <AlertColors color="red" text="An error alert for showing message." />}
<form className="m-2" onSubmit={handleSubmit}>
<div className="form-group">
<input type="text" name="first_name" value={formData.first_name} onChange={handleChange} className="form-control hover" placeholder="First Name" />
</div>
<div className="form-group">
<input type="text" name="last_name" value={formData.last_name} onChange={handleChange} className="form-control" placeholder="Last Name" />
</div>
<div className="form-group row">
<div className="col">
<input type="text" name="birthday" value={formData.year} onChange={handleChange} className="form-control col-md-2" placeholder="year" />
</div>
<div className="col">
<input type="text" name="birthday" value={formData.month} onChange={handleChange} className="form-control col-md-2" placeholder="mouth" />
</div >
<div className="col">
<input type="text" name="birthday" value={formData.day} onChange={handleChange} className="form-control col-md-2" placeholder="day" />
</div>
</div>
<div className="form-group">
<input type="text" name="phone_number" value={formData.phone_number} onChange={handleChange} className="form-control" placeholder="Phone Number" />
</div>
<div className="form-group">
<input type="email" name="email" value={formData.email} onChange={handleChange} className="form-control" placeholder="Email" />
</div>
<div className="form-group">
<input type="text" name="username" value={formData.username} onChange={handleChange} className="form-control" placeholder="Username" />
</div>
<div className="form-group">
<input type="password" name="password" value={formData.password} onChange={handleChange} className="form-control" placeholder="Password" />
</div>
<div className="form-group">
<input type="password" name="password" value={formData.rePassword} onChange={handleChange} className="form-control" placeholder="rePassword" />
</div>
<button onClick={handleSubmit} type="submit" className="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
)
};
you can take multiple actions into account when making the code cleaner. In the case of the code you provided, I would recommend considering these suggestions to make your code cleaner and more scalable.
<div className="form-group">
<input type="text" name="first_name" value={formData.first_name} onChange={handleChange} className="form-control hover" placeholder="First Name" />
</div>
By doing this you can unlock a better way in case you want to change or add features to your forms. If we imagine that you may use this code in other pages and forms, first you do not want to repeat your code and will easily import this component. Secondly, if you want to make your form layout responsive, or add a label tag you can change the styles here one time and give some props to this component. For example, you will use it like this:
<FormGroup type="vertical" >
<label>email:</label>
<input />
</FormGroup>
or, if your layout is horizontal:
<FormGroup type="horizontal" >
<label>email:</label>
<input />
</FormGroup>
By the way, you can do the same stuff with the input in case necessary.
Generally speaking, you will get better at these points when you code more and see others' codes. But, I recommended reading or searching for clean code principles and other rules like DRY and having an understanding of them.
Hope you find my point of view helpful. If you want you can take a look at my GitHub repositories to have a glance at how codes are within a project. Though, I have to mention that every developer has their own style of writing code and decision-making.