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.
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
@@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.
Observation for the debounce hook - the timer clean up in useEffect is the hole key (not just for memory leaks), without it you don't reset the timer on each new text, you will just delay all the text's changes being returned.
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
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
@@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.
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 👋
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 (
Good video. I think you don't need a state for "fruitsData" in the first question because you never used the corresponding update (set) function. Instead you can use the fruits constant outside the main function and use it for filtering the fruits. Am I right?
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 .
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
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.
I got over 3 mins in and realised this was just going to be a long advert for the sponsors. Don’t waste your time folks as there are React interview videos out there that actually cover - well you know React interviews.
Second task is much more complicated with that useeffect shit,why,just why programing couldnt be simplier?...These are examples why people quit programing.....😢😢😢😢
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
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.
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
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
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.
Depends on our choice both are ok
@@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.
Observation for the debounce hook - the timer clean up in useEffect is the hole key (not just for memory leaks), without it you don't reset the timer on each new text, you will just delay all the text's changes being returned.
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
yes , i was having the same question
This was my approach too, and it worked perfectly
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
Yeah i thought the same lol
no we cannot do so. state is necessay as whenever there is change in state , new dom will painted in screen.
@@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.
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 👋
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
Where is the github repo ?
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 (
);
};```
Hello Pedro. Congratulations on 200k subscribers. You deserved it man, I learned a lot of React from you.
Good video. I think you don't need a state for "fruitsData" in the first question because you never used the corresponding update (set) function. Instead you can use the fruits constant outside the main function and use it for filtering the fruits. Am I right?
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 .
Hi Pedro, doesnt the native html tag already provide this filtering functionality?
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
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.
Thx for sharing this knowledge with us Pedro!
Nice content. What is the music playing after the intro ?
with this search question can you do a video on how to do client side search/filtering and server side search in react.
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
With typescript it would be better
@@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
Just learn by yourself
Great video for interview confidence. I owe you!
Great variety! 2 and 3 are on my to do list.
where is the github repo bro ?
This video is a very useful for me now. Thanks a lot )
Congratulations🎉 200k
Please make a series on it!!!!
Hi my brother, l have problem about react can you explain how can l make twitter setting page pc and mobile responsivibility?
Please make a microservice project using Mern
I got over 3 mins in and realised this was just going to be a long advert for the sponsors. Don’t waste your time folks as there are React interview videos out there that actually cover - well you know React interviews.
Well, the advert lasts only 40 seconds, the rest of the vide is not an ad...
Nice video, how old are you Pedro?
this is cool bro
Second task is much more complicated with that useeffect shit,why,just why programing couldnt be simplier?...These are examples why people quit programing.....😢😢😢😢
🥲
Great coding by using just 1 eye
Are you brazilian? Ótimo conteduo
Sou, vlww mano!!
Congress 200k
Thank you!!!!
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
loll i have 6 years of react job experience, ofc i don't have a basic understanding of it...
@@PedroTechnologies then you have bad experience need to educate yourself
3 minutes just for vanter....Nice