Middle

#React signup form 1. Explain how StateProvider works, share your thoughts with interviewer. 2. Take a look at /src/api/mock, explain how it works. 3. Check SubmitButton color and fix it 4. Implement client form validation in Signup component. (\\) Keep in mind task number 9. Rules: - Username, Email, Password, Repeat Password fields should have at least 6 characters length; - Password should match Repeat Password; - Validation should be done upon "Sign Up" button click; - Fields that have invalid values should be marked (error and helperText props); 6. API response may have an error that should be displayed to user near corresponding field. 7. Make sure that UserName component renders new username after successful submit. 8. Implement the new SignupSuccess component. It should be shown instead of sign up form. 9. Implement server validation for appropriate fields.

sobes.tech AI

Answer from AI

StateProvider is a component that is typically used to manage the global state of a React application, often with the Context API. It provides state and methods to modify it to all nested components, avoiding "prop drilling" through multiple levels.
The /src/api/mock folder usually contains API mocks — imitation server responses for development and testing without a real backend. This can be a set of functions returning promises with dummy data or delays to simulate real requests.
To fix the color of the SubmitButton, you need to check the styles applied to it and ensure the color matches the design. For example, if using Material-UI, you can set the color via the color prop or through sx/style:

<SubmitButton color="primary">Sign Up</SubmitButton>

To validate the form in the Signup component when clicking the "Sign Up" button, you should:

Check the length of each field (at least 6 characters)
Verify that the password matches the repeat password
Mark fields with errors using error and helperText (for example, in Material-UI's TextField)

Validation example:

const [errors, setErrors] = React.useState({});

const validate = () => {
  const newErrors = {};
  if (username.length < 6) newErrors.username = 'Minimum 6 characters';
  if (email.length < 6) newErrors.email = 'Minimum 6 characters';
  if (password.length < 6) newErrors.password = 'Minimum 6 characters';
  if (repeatPassword.length < 6) newErrors.repeatPassword = 'Minimum 6 characters';
  if (password !== repeatPassword) {
    newErrors.password = 'Passwords do not match';
    newErrors.repeatPassword = 'Passwords do not match';
  }
  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = () => {
  if (validate()) {
    // send data
  }
};

If the API returns an error for a specific field, you should display it next to that field, for example, by updating the error state:

setErrors(prev => ({ ...prev, [field]: apiErrorMessage }));

The UserName component should receive the new username from the state after successful registration and render it. This can be done via props or global state.
The new SignupSuccess component is a simple component that is displayed instead of the form after successful registration:

function SignupSuccess() {
  return <div>Registration successful! Welcome!</div>;
}

Server-side validation is the process of checking data on the backend. The client should send data, and the server returns errors if any. The client then handles these errors and displays them to the user. This is important for security and data integrity.

Previous Next