posts 1 #884
posts 1 #884
Conversation
src/components/NewCommentForm.tsx
Outdated
| break; | ||
| } | ||
| } | ||
| }, [name, email, body]); |
There was a problem hiding this comment.
There is no need to include 'name', 'email', and 'body' in the array of dependencies for the useCallback hook because they are not being used inside the hook.
src/components/PostDetails.tsx
Outdated
| }) => { | ||
| const [isFormOpened, setIsFormOpened] = useState<boolean>(false); | ||
|
|
||
| useMemo(() => { |
There was a problem hiding this comment.
You use useMemo instead of useEffect to reset the form state when a new post is selected. useMemo is for memoizing expensive calculations, useEffect is for side effects like resetting state.
src/App.tsx
Outdated
| const [commentsError, setCommentsError] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| getUsers('/users') |
There was a problem hiding this comment.
Calling API endpoint directly in component. It's better to isolate API calls in separate services or utils.
src/App.tsx
Outdated
| {posts && posts.length > 0 | ||
| && ( | ||
| <PostsList | ||
| posts={posts !== null ? posts : []} |
There was a problem hiding this comment.
Unnecessary null check. You already checked in the condition above that posts is not null and that its length is greater than 0.
src/components/NewCommentForm.tsx
Outdated
| const [name, setName] = useState<string>(''); | ||
| const [email, setEmail] = useState<string>(''); | ||
| const [body, setBody] = useState<string>(''); |
There was a problem hiding this comment.
I'd recommend you to use form fields as one state since this is one entity
| const [name, setName] = useState<string>(''); | |
| const [email, setEmail] = useState<string>(''); | |
| const [body, setBody] = useState<string>(''); | |
| const [fields, setFields] = useState({ | |
| name: '', | |
| email: '', | |
| body: '' | |
| }); |
src/components/NewCommentForm.tsx
Outdated
| const [nameError, setNameError] = useState<boolean>(false); | ||
| const [emailError, setEmailError] = useState<boolean>(false); | ||
| const [bodyError, setBodyError] = useState<boolean>(false); |
| } | ||
| }, [name, email, body]); | ||
|
|
||
| const formSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => { |
looks working
https://vetal-hovenko.github.io/react_dynamic-list-of-posts/#user-3