Submitted 3 months ago

React + Styled Components + Debounce search

Aurélien Cabirol•130

@AurelienWebnation

Preview site View code

This is a solution for...Dictionary web app

HTML
CSS
JS
API

3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This project is currently the best I made and the most proud of. I really loved coding this dictionary.

What challenges did you encounter, and how did you overcome them?

Astonishment, a challenges I encountered was to set an error on the input when this one is empty. I used an realtime api call with a debounce and you don't need to press enter or click to submit your word. So I can't use the onSubmit function to prevent an empty input. Instead, I choose to made a verification into the handleChange function.

What specific areas of your project would you like help with?

I used the handleChange function to check if the input is empty or not, this is the function :

function handleChange() {

if (!event.target.value) {
  setInputError('Whoops, can’t be empty…');
} else {
  setInputError('');
}

setWord(event.target.value);

}

I think there is a better way to do this. Actually, the network request will be made, even if the input is empty.

Community feedback

haquanq ®️•1,585
@haquanqPosted 3 months ago
Hello @AurelienWebnation,

Nice work on the solution!

I think it is unnecessary to show input error (empty error) when the request will eventually be sent. Maybe considers adding an empty component with descriptive text to encourage users to use the search when the input is empty is more appropriate.

Have a nice day and happy coding!!!
0
Aurélien Cabirol•130
@AurelienWebnationPosted 3 months ago
@haquanq Hey, thanks for your reply!

The figma model want to show an error when the input is empty, this is why we need to show that error to the user.
0
haquanq ®️•1,585
@haquanqPosted 3 months ago
hey @AurelienWebnation, the Figma model did not tell you to build a search component with "debouce" feature!! So maybe it is unnecessary to do so!
0
Aurélien Cabirol•130
@AurelienWebnationPosted 3 months ago
@haquanq That's right! I think the best option like you said is to create and display a specific component when search input is empty.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord