React JS Interview Questions ( Multi Select Search ) - Frontend Machine Coding Interview Experience
HTML-код
- Опубликовано: 30 июн 2024
- 🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
✨ OdinSchool React Web Development Course. Apply now - hubs.la/Q02hWSFf0
🟪 Follow me on Instagram for Homework Solution - / roadsidecoder
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
React Interview Question on implementing a Multi Select Search Bar feature will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Debouncing Tutorial -
• Javascript Interview Q...
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App wi...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
00:48 Setup New React JS App
02:49 Building Input Field
04:47 OdinSchool React Bootcamp
05:58 Styling our Input
07:16 Fetching User Suggestions
13:55 Selecting a Suggestion
15:41 Handling duplicate suggestions
19:03 Rendering Selected Pills
24:56 Auto Focus user Input
25:55 Remove Pills on Backspace
27:27 Keyboard Navigation (Homework 1)
28:03 Implement Debouncing (Homework 2)
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
🟪 Follow me on Instagram for Homework Solution - instagram.com/roadsidecoder/
➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
more of this type of videos plz
I think you are the rare youtuber who teaches react's very important concepts 🙌.
When you said, we will use a set, it made me Subscribe to your channel man! Like a lot of tutorials out there but they missed these small things! Kudos to how you're explaining the thing in simple way!!
Zepto asked this same question for their frontend SDE-1 role.
I aced that with all the edge cases and added keyboard navigation as well
@@AnuMessi10please share your github account
@@AnuMessi10 did you got any reply from them?
@@AnuMessi10 can we use tailwindcss in interview ?
Bhai submit krne ke baad. Kuch reply hi ni aaya h? Kisiko aaya?
Learned something new... Thank you for the amazing videos.
Beautifully explained. You're the GOAT
💖💖
Thank you so much for providing such a quality content for free ❤
Thanks bro, learned some senior engineer stuff❤.
very useful content...we need more such videos.
Wow, you thought me a lot of staffs and thank you , this is all i can say
Thanks for the awesome video.
Can you please make a video on jwt in mern stack with access and refresh token ?
This is gem of a content, man 🫡
damn bro that's a great explaination, for the last homework we can create a useEffeect hook along with setTimeout to 4-5 milliseconds and only when the user stopes typing for more than that timeout well make the API call, and we also have to remove that setTimeout using cleanup function.
Can you make video on making an admin panel?
Whether it can be accomplished in single route with states or needs to have multiple routes for each tab?
This could be a good video
awesome stuff bro thankyou👍
Great tutorial brother ❤️👍
can we use taliwndcss also in machine coding round , native css is some what hard to write
more of this type of videos
keep it coming 😍😍😍😋😋😋
how we rollback API response if it not hit or in case of bad status
For the condition where we do not need already selected option to be displayed, i guess it's better to ask the interviewer if that's the edge case we need to consider. The version i tried to built had the user in list but selecting the same one would not make the user added as pills twice and to do so i used another filter with item! == user.email
Just before using spreadOperator for setting pilla in array.
Thanks for the video!
Great content as always ❤
Great point!
What if they ask to do this in vanilla javascript? Also, if we can do this in vanilla js, can we transfer that knowledge to create the same in Vue js or angular?
Learned a new thing. Thanks bhai ❤. Also can you explain debouncing for this input search as there are fetch calls for every user input. That's actually is the best thing
I have discussed how to implement that in video from 28:03
@@RoadsideCoder Yes, thank you ❤
Please make video on infinite scrolling
Zepto asked this question for frontend developer role. Did anyone got reply from them??
Thanks bhai
Nice video
Can anyone tell me how input shifted when pills got added. Can you tell me the css for it
it's because we have rendered the pills before input and if you remove the outline propery on focus on input, you will know how long our input field actually is
great video
Thanks!
Great Video, Try to some react native content also if possible.
Will do soon
Bhiaya please upload the video for deployment of the NoteZipper project.
ruclips.net/video/aQ_2DMXSNwY/видео.html
What if we use splice instead of filter for removing ?
Splice will effect the original array.
@RoadsideCoder try build the calendar from scratch
Thanks for the idea!
How to use react date picker in typescript. Im getting an error startofweek cannot be imported
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { startOfWeek } from "date-fns";
const App: React.FC = () => {
const [startDate, setStartDate] = useState(new Date());
const handleChange = (date: Date | null) => {
setStartDate(date);
};
return (
Date Picker Example
);
};
export default App;
Yeh cheez toh simple react-select use krke bhi kr sakte h hum
Interviews me allowed nhi
Zepto asked question it is.
Yess
I came here suspecting that this video would be a multi-step form but it is not. Along with this, let me also tell you that this video is also most important but
I strongly request you to create a separate video on Multi-Step Forms using ReactJS with Responsive UI from scratch without using any third-party libraries.
Thank you
Thanks man, Will do!
bhai samjh achy sy ajati hay kar b lety hain but during interview ni samjh ati kya krna kesy krna so please uska btyen kesy overcome kren...
i think uska solution yehi hai ki 3-4 bar practice kar le kudse ye banane ki
10000 lol
Can you improve my cv ?
Should I message you on WhatsApp?
You can book a call with me - topmate.io/roadsidecoder/