React Interview Questions | Beginner to Advanced

[@PedroTechnologies]

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech . You’ll also get 20% off an annual premium subscription.

[@godofwar8262]

Bro please start backend series by covering topic like node js for beginners to advanced i had learn front-end from you please start backend

[@xyves6327]

1. First question Use the provided input field, display filtered list of items when typing that match typing 3:45 2. Second question 12:40 3. Third question 18:40

[@dngathondu]

For the 3rd question, the following code worked for me ```import { useState } from "react"; export default PhoneNumber = ({ maxLength = 10 }) => { const [input, setInput] = useState(""); const handleInputChange = (e) => { const numbers = e.target.value.replace(/[^0-9]/g, ""); const size = numbers.length; if (size > maxLength) return; if (size > 3 && size 3 && size > 6) { setInput( `(${numbers.slice(0, 3)}) ${numbers.slice(3, 6)} - ${numbers.slice(6)}` ); } else { setInput(numbers); } }; return ( ); };```

[@foysalmohammad3278]

Good video with nice explanation. I think two states are not necessary. You can Just use one useState variable to store onchange value of input element, and then filter like this: const filteredFruits = fruits.filter((fruit) => fruit.toLowerCase().includes(typedFruits.toLowerCase()) ); And render filteredFruits

[@medmolay8627]

yes , i was having the same question

[@kooyaw4445]

This was my approach too, and it worked perfectly

[@williamrinaldi1808]

Why set state for the search term? You can just set filtered fruits state in handle input function and filter using the event target value.

[@maheshshirsat9075]

Depends on our choice both are ok

[@johnddonnet5151]

@@maheshshirsat9075 Event target value is better as it can be easily transalated to other frameworks, which shows that you understand that codebases are not forever.

[@akhilkumarsingh5041]

The third Qs can be solve like this as well!! am I correct import React from 'react' import { useState } from 'react' const PhoneNum = () => { const [phone, setphone] = useState(""); const handleInputChange=(e:any)=>{ let value = e.target.value; let numericValue = value.replace(/[^0-9]/g, ""); if (numericValue.length > 3) { numericValue = `(${numericValue.slice(0, 3)})-${numericValue.slice(3)}`; } setphone(numericValue); } return ( PhoneNum ) } export default PhoneNum

[@calvinputera2504]

thank's for your content about React I learned a lot from your videos.. because of that I was able to get a job as frontend developer now I have been in this career for about 3 years.. you have changed my life.. keep uploading your videos because many people who have been helped because of this.. greetings from Indonesia 👋

[@mkum2141]

why do we need to create fruitData state in question 1? Can't we just filter the original fruits array based on the search term state? Eveytime the user types in a new search term the component will rerender and this refilter the data - doesn't seem like we need the additional state for the fruit

[@setasan]

Yeah i thought the same lol

[@PranshuSahu-pl7gx]

no we cannot do so. state is necessay as whenever there is change in state , new dom will painted in screen.

[@mkum2141]

@@PranshuSahu-pl7gx yes, but we only need to change the fruit when the searchTerm changes. When the serchTerm changes, the component will rerender and the the fruits will be filtered using the new search term. If you actually look at the code we aren't doing anything with the fruitData state other than initialising. Try implementing this yourself and youll see you only need the search term state and the fruit state. You can directly filter the fruits array on each render using the search term state.

[@naveenbasyal001]

1st and 2nd is pretty nice and easy, which we use on daily basis but the 3rd one is definitely the trickiest one, although we mostly use libraries for this but it's better to understand how things are working, we'll surely gonna forget the logic in future even if we try to do it from scratch .

[@juancarlosrodriguez1085]

Hello Pedro. Your videos are very instructive. I’ve learn a lot with them. I would like to ask you for a video where you implement & explain the search functionality in a MERN scenario with redux toolkit for state. Thanks a million for your hard work.

[@lucasrmendonca]

Hi Pedro, doesnt the native html tag already provide this filtering functionality?

[@raviel_0422]

Hello Pedro. Congratulations on 200k subscribers. You deserved it man, I learned a lot of React from you.

[@KatiaZanotti-g1g]

in the phone input you have to manage the user backspace after the "-" or the ")" now there is an error and the cursor goes back to the end of the input

[@ugogalliano1176]

Where is the github repo ?

[@godofwar8262]

Bro please start backend series by covering topic like node js for beginners to advanced i had learn front-end from you please start backend

[@regilearn2138]

With typescript it would be better

[@godofwar8262]

@@regilearn2138 yeah it will be cherry on the top also if he make a video on typescript before this Crouse just a crash course would be great

[@Herxh428]

Just learn by yourself

[@regilearn2138]

with this search question can you do a video on how to do client side search/filtering and server side search in react.

[@deadb1t]

Thx for sharing this knowledge with us Pedro!

[@fabricator.cap.hill.seattle]

Great variety! 2 and 3 are on my to do list.

[@adududuke3995]

Nice content. What is the music playing after the intro ?

[@xisidorix]

Great video for interview confidence. I owe you!

[@GigaSquidward.]

This video is a very useful for me now. Thanks a lot )

[@ihebbenaicha1353]

where is the github repo bro ?

[@samialvi4226]

Please make a series on it!!!!

[@powercircuitacademy]

Congratulations🎉 200k

[@8888-t4d]

Hi my brother, l have problem about react can you explain how can l make twitter setting page pc and mobile responsivibility?

[@soumyajitmandal3503]

Please make a microservice project using Mern

[@Misica11000]

Second task is much more complicated with that useeffect shit,why,just why programing couldnt be simplier?...These are examples why people quit programing.....😢😢😢😢

[@Javed_Khan_.]

🥲

[@Shoxie34]

Nice video, how old are you Pedro?

[@g-g-9]

Great coding by using just 1 eye

[@wanjeeric4885]

this is cool bro

[@Bruno_Corso]

Are you brazilian? Ótimo conteduo

[@PedroTechnologies]

Sou, vlww mano!!

[@gawolimgexige]

Congress 200k

[@PedroTechnologies]

Thank you!!!!

[@viveksah2069]

This is pathetic it’s showings you don’t have the basic understanding of react it can be done only one function by useing useMemo with filter why do you need so many use effects and const

[@PedroTechnologies]

loll i have 6 years of react job experience, ofc i don't have a basic understanding of it...

[@viveksah2069]

@@PedroTechnologies then you have bad experience need to educate yourself

[@faustozambrano4901]

3 minutes just for vanter....Nice