how to improve my coding standards to meet senior developer standards - reactjs

Question

I just recently finished a tech test for a company applying for a frontend developer working in react and I was rejected with no feedback. So I was wondering what I could have done better and improved for next time. I've just recently tried to apply for seniors frontend roles. Here is the test they gave me and what I produced.
Here is the description of their test.
Create a component as a Form Control according to this design
The control should accept a label
The control should accept a validation function with configurable error message
The control can be incorporated inside a <form> and the selected option pushed up to the form.
The control should fire an event on change
Use the component you made in the previous step to create a form according to this design
Call this https://jsonplaceholder.typicode.com/users to populate list of the users. name should be displayed while id should be saved as the value in the form.
Add the required validation with the Please select a user error message.
Add 2 text fields, one for title and one for body both with required validation. (Don't worry about matching the design for the text fields.)
On submit of the form create a new post by sending the data to https://jsonplaceholder.typicode.com/posts. The request interface will look like
{
"title": "foo",
"body": "bar",
"userId": 1
}
This is what I produced:
https://codesandbox.io/s/objective-thunder-322xi?file=/src/components/FormComponent.js
I am aware it could have been better but there was a time limit and there was no feedback provided so I don't know where I went wrong. Could someone look through it please and see if it aligns with their instructions and where it could be improved.

Answer 1

I went through your code and may have found some codes which I may have implemented a little differently. I am not sure if this is the best coding standard but may have gone like this.
I see a lot of useStates declared there(7 declarations). I might have group some related states together. I have given an example for reference below. Using too many declarations may not be good in some cases.
The handleChange function (const handleTitleChange = (ev) => setTitle(ev.target.value);) can be improved. The way handled here is repeating for every input. So, if I have 10 inputs, there will be 10 lines for handleChange function. I gave a better way of handling change in my example. Remember to put the same 'name' attribute in the input field and the state. This code will save you a lot of time in future handling onChange and also clean code
I see you use 'id' attribute to refer to DOM elements in the form. This is good for vanilla JS but in React, it is preferred not to use. There is a better way in react called creating a reference, i.e. React.createRef(). This provides an easy reference to the DOM elements. Please refer to my example below.
The validation handling method can be improved. Code in example.
I see the error message does not go away once you fill content. So, this needs to be changed.
I have managed to come up with another way to implement which is totally dependent on states for form validation handling.
CODE WITH CREATE REF Don't mind the CSS classes, I used bootstrap
import React, { useState, useEffect } from 'react';
const TestComponent = () => {
const [input, setInput] = useState({
title: '',
body: '',
})
const titleRef = React.createRef()
const bodyRef = React.createRef()
const handleChange = e => {
setInput({ ...input, [e.target.name]: e.target.value })
}
const onHandleSubmit = e => {
e.preventDefault();
input.title ? titleRef.current.innerHTML = '' : titleRef.current.innerHTML = 'Please add a title';
input.body ? bodyRef.current.innerHTML = '' : bodyRef.current.innerHTML = 'Please add a body';
if (!input.title || !input.body) {
return false;
}
console.log('Submit your form');
}
return (
<div className="container py-5">
<form onSubmit={onHandleSubmit}>
<label>Title</label>
<input type="text" name="title" value={input.title} onChange={handleChange} className="form-control" />
<p ref={titleRef} style={{ color: 'red' }}></p>
<label>Body</label>
<input type="text" name="body" value={input.body} onChange={handleChange} className="form-control" />
<p ref={bodyRef} style={{ color: 'red' }}></p>
<button>Submit</button>
</form>
</div>
);
}
export default TestComponent;
CODE WITH STATES FOR VALIDATION
import React, { useState, useEffect } from 'react';
const TestComponent = () => {
const [input, setInput] = useState({
title: '',
body: '',
titleError: '',
bodyError: '',
})
const handleChange = e => {
setInput({ ...input, [e.target.name]: e.target.value })
}
const onHandleSubmit = e => {
e.preventDefault();
setInput({
...input,
titleError: input.title ? '': 'Please add a title',
bodyError: input.body ? '': 'Please add a body',
})
console.log(input);
if (!input.title || !input.body) {
return false;
}
console.log('Submit your form');
}
return (
<div className="container py-5">
<form onSubmit={onHandleSubmit}>
<label>Title</label>
<input type="text" name="title" value={input.title} onChange={handleChange} className="form-control" />
<p style={{ color: 'red' }}>{input.titleError}</p>
<label>Body</label>
<input type="text" name="body" value={input.body} onChange={handleChange} className="form-control" />
<p style={{ color: 'red' }}>{input.bodyError}</p>
<button>Submit</button>
</form>
</div>
);
}
export default TestComponent;
P.S. There will be much better ways to handle according to the scenario, but this may help you in some way.
EDIT:
Adding Radio button to select the user.
userId added to state
const [input, setInput] = useState({
title: '',
body: '',
titleError: '',
bodyError: '',
userId: '',
})
Radio select for users.
<div>
<input type="radio" name="userId" value="1" id="1"
checked={input.userId === "1"} onChange={handleChange}
/>
<label htmlFor="1">User 1</label>
</div>
<div>
<input type="radio" name="userId" value="2" id="2"
checked={input.userId === "2"} onChange={handleChange}
/>
<label htmlFor="2">User 2</label>
</div>
The same onChange handler will work for the radio select also. I see you use the response from useFetch to render the users. You can use same map logic to render this radio by setting the fields. Set the value and id attribute to user id from response and so on.

Answer 2

One immediate issue I found is a console error.
Production quality code from a Sr. level developer should not be doing this. I would expect to see errors in console if a bug was found or dealing with some edge case.
Warning: Failed prop type: Invalid prop buttonSelectedof typebooleansupplied toButton, expected string`.
in Button (at FormComponent.js:21)
in FormComponent (at App.js:8)
in div (at App.js:7)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)`
I found this in the console just browsing to the link you shared. There are other things to clean up but this is the most obvious thing I've found so far.