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
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
@@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.
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 (
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 👋
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 .
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.
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.
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
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
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 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.
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
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 (
);
};```
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 👋
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 .
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.
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.
Hello Pedro. Congratulations on 200k subscribers. You deserved it man, I learned a lot of React from you.
Hi Pedro, doesnt the native html tag already provide this filtering functionality?
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
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
Nice content. What is the music playing after the intro ?
Where is the github repo ?
with this search question can you do a video on how to do client side search/filtering and server side search in react.
Please make a series on it!!!!
Thx for sharing this knowledge with us Pedro!
Great variety! 2 and 3 are on my to do list.
This video is a very useful for me now. Thanks a lot )
Congratulations🎉 200k
Great video for interview confidence. I owe you!
where is the github repo bro ?
Please make a microservice project using Mern
Great coding by using just 1 eye
Hi my brother, l have problem about react can you explain how can l make twitter setting page pc and mobile responsivibility?
Nice video, how old are you Pedro?
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 cool bro
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