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 context provider that manages the application's global state, usually implemented through React Context and useReducer. It allows components to subscribe to the state and dispatch actions to modify it, simplifying state management without third-party libraries.
The /src/api/mock folder typically contains mock data or functions that simulate API requests. This enables frontend development and testing without a real backend, returning predefined responses.
To fix the color of the SubmitButton, check the styles or props passed to it and ensure the color matches the design. For example, if the color is set via a CSS class, verify the class correctness or replace the inline style.
To validate the form in the Signup component when clicking the "Sign Up" button, you should:

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
  }
};

When API errors occur, display messages next to the corresponding fields, for example, by updating the error state.
After a successful submission, update the UserName component to display the new username.
The SignupSuccess component should be shown instead of the form after successful registration, for example, through conditional rendering.
Server-side validation is the process of checking data on the backend, which returns errors if the data is invalid. The client should handle these errors and display them to the user.

Previous Next