solution #2674
solution #2674
Conversation
There was a problem hiding this comment.
Great job on implementing the task requirements! 🎉 Your code meets all the necessary functionality and constraints, and you've done well in handling form validation, state management, and component structure. Keep up the excellent work, and continue refining your skills! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| export const App = () => { | ||
| // write code | ||
| export const App: React.FC = () => { | ||
| const [movies, setMovies] = useState(moviesFromServer); |
There was a problem hiding this comment.
Ensure that moviesFromServer is correctly imported and contains the expected data structure. It should be an array of movie objects matching the structure used in handleAddMovie.
| return ( | ||
| <div className="page"> | ||
| <div className="page-content"> | ||
| <MoviesList movies={moviesFromServer} /> | ||
| <MoviesList movies={movies} /> |
There was a problem hiding this comment.
Verify that the MoviesList component is implemented to correctly receive and display the movies prop. It should be able to handle an array of movie objects.
| </div> | ||
| <div className="sidebar"> | ||
| <NewMovie /* onAdd={(movie) => {}} */ /> | ||
| <NewMovie onAdd={handleAddMovie} /> |
There was a problem hiding this comment.
Ensure that the NewMovie component is implemented to correctly call the onAdd prop function with a new movie object. The object should match the structure expected by handleAddMovie.
| // Increase the count after successful form submission | ||
| // to reset touched status of all the `Field`s | ||
| const [count] = useState(0); | ||
| const urlPattern = |
There was a problem hiding this comment.
Ensure that the urlPattern is correctly defined to match valid URLs. It should be comprehensive enough to cover the expected URL formats for imgUrl and imdbUrl.
| onChange={value => handleInputChange('imgUrl', value)} | ||
| onBlur={() => handleBlur('imgUrl')} | ||
| required | ||
| validationCallback={value => urlPattern.test(value)} |
There was a problem hiding this comment.
Verify that the TextField component correctly utilizes the validationCallback prop to validate the input value. It should provide feedback based on the result of the validation.
| @@ -8,6 +8,7 @@ type Props = { | |||
| placeholder?: string; | |||
| required?: boolean; | |||
| onChange?: (newValue: string) => void; | |||
| validationCallback?: (value: string) => boolean; // for custom validation | |||
There was a problem hiding this comment.
Ensure that the validationCallback function is correctly passed from the parent component and that it performs the necessary validation logic for the input value.
|
|
||
| // Check if the field has an error | ||
| const hasError = | ||
| touched && ((required && !value.trim()) || !validationCallback(value)); |
There was a problem hiding this comment.
The hasError logic correctly checks if the field is required and if the custom validation fails. Ensure that the error message is appropriate for the validation being performed.
DEMO LINK