add react movies list add form #2751
Conversation
There was a problem hiding this comment.
Great job on implementing the core functionality of your application! 🎉 Your code meets the main requirements, and you've done well with handling form submissions, validation, and data preparation. While there are a few minor issues, such as variable naming and ensuring errors are not shown after clearing the form, these do not significantly impact the functionality. Keep up the good work, and consider refining these areas for even cleaner code in the future. Well done! 👏
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -1,16 +1,30 @@ | |||
| import React, { useState } from 'react'; | |||
| import './App.scss'; | |||
| import { MoviesList } from './components/MoviesList'; | |||
| import { NewMovie } from './components/NewMovie'; | |||
| import moviesFromServer from './api/movies.json'; | |||
There was a problem hiding this comment.
Ensure that the moviesFromServer import is correctly pointing to a valid JSON file. Verify that the JSON structure matches the Movie interface defined in this file.
| return ( | ||
| <div className="page"> | ||
| <div className="page-content"> | ||
| <MoviesList movies={moviesFromServer} /> | ||
| <MoviesList movies={movies} /> |
There was a problem hiding this comment.
Ensure that the MoviesList component is implemented to correctly handle the movies prop. It should expect an array of objects that match the Movie interface.
| </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 handle the onAdd prop. It should call this function with a new Movie object when a new movie is added.
| <form className="NewMovie" key={count}> | ||
| <h2 className="title">Add a movie</h2> | ||
| <form onSubmit={handleSubmit} data-cy="new-movie-form"> | ||
| <h2>Add a movie</h2> | ||
|
|
||
| <TextField |
There was a problem hiding this comment.
Ensure that the TextField component is implemented to correctly handle the props such as name, label, value, onChange, onBlur, and required. It should be able to display the input field with the correct label and handle user input and validation feedback.
|
|
||
| {hasError && <p className="help is-danger">{`${label} is required`}</p>} | ||
| {hasError && ( | ||
| <p className="help is-danger">{error || `${label} is required`}</p> |
There was a problem hiding this comment.
Ensure that the error prop is correctly passed from the parent component to display validation messages. This prop should contain any error message related to the input field, allowing the component to display it when necessary.
https://ValentynaD.github.io/react_movies-list-add-form/