Submit React form with multiple text input and image - node.js

Question

So, from this link REACT : How can we Upload Image and Input text using Fetch or Axios in a single click function , i learn how to submit form with text + images, but it only contains 1 text input, from my case, i have multiple text input, How i submit multiple text input with formData ? i tried use Object, but it cannot be use on server side.
Edit: So i got it using this, but is there a way to send the whole object directly?
async function submitForm() {
const formdata = new FormData(); // for adding form files i guess
for (let i = 0; i < files.length; i++) {
formdata.append("files", files[i], files[i].name); // "name", files, filename
}
for (let key in inputs) {
formdata.append(key, inputs[key]);
}
const response = await axios.post("/games", formdata);
const { data } = response;
console.log(data.message);
}
here is my code
const AddForm = ({ getData, classes }) => {
console.log("Rendering AddFORM");
const [checkboxes, setChecked] = React.useState([]);
const [inputs, setInputs] = React.useState({});
const [files, setFiles] = React.useState(null);
const history = useHistory();
React.useEffect(() => {
setInputs({ ...inputs, platform: checkboxes });
}, [checkboxes]);
const onChangeForField = React.useCallback(({ target: { name, value } }) =>
setInputs((state) => ({ ...state, [name]: value }), [])
);
const onChangeForFiles = ({ target: { files } }) => setFiles(files);
const handleCheck = ({ target: { value } }) => {
checkboxes.includes(value)
? setChecked(checkboxes.filter((item) => item !== value))
: setChecked([...checkboxes, value]);
};
async function submitForm() {
const formdata = new FormData(); // for adding form files i guess
for (let i = 0; i < files.length; i++) {
formdata.append("files", files[i], files[i].name); // "name", files, filename
}
formdata.set("data", inputs);
const response = await axios.post("/games", formdata);
const { data } = response;
console.log(data.message);
}
return (
<Paper
elevation={2}
style={{ padding: "1rem", width: "70%", margin: "0 auto" }}
>
<form>
<Typography variant="h5" color="initial">
Add a new game
</Typography>
<TextField
required
id="standard-required"
name="title"
label="Title"
fullWidth
placeholder="Game title"
margin="normal"
onChange={onChangeForField}
/>
<TextField
fullWidth
multiline
required
id="standard-required"
name="description"
label="Description"
placeholder="Description"
margin="normal"
onChange={onChangeForField}
/>
<FormControl margin="normal" fullWidth>
<FormLabel component="legend">Select Platforms</FormLabel>
<FormGroup row>
{platforms.map((p, idx) => (
<FormControlLabel
key={idx}
control={
<Checkbox name="platforms" onChange={handleCheck} value={p} />
}
label={p}
/>
))}
</FormGroup>
</FormControl>
<FormControl>
<Button variant="contained">
<label htmlFor="file-upload">Upload Files</label>
</Button>
<input
type="file"
multiple
id="file-upload"
name="images"
style={{ display: "none" }}
onChange={onChangeForFiles}
></input>
</FormControl>
<div className={classes.ButtonsContainer}>
<Button
variant="contained"
color="primary"
onClick={async (e) => {
e.preventDefault();
await submitForm();
getData();
// history.push("/");
}}
>
Submit
</Button>
<Button variant="contained" color="secondary">
<Link to="/">Go Back</Link>
</Button>
</div>
</form>
</Paper>
);
};
server side route
app.post(
"/games",
upload.array("files"),
wrapAsync(async (req, res) => {
console.log(req.body);
console.log(req.files);
got [object Object] on server side, looks like it cannot parse this.
Thanks before