КОМЕНТАРІ •

  • @koffet658
    @koffet658 3 роки тому +61

    After i tried following the video, i just realized this is not for beginner.
    But it's good.
    Me: beginner react

    • @darioperez5945
      @darioperez5945 3 роки тому +1

      Yeah, same here. I copied and tryed to understand the code in the process but it's quite difficult for a newbie.

    • @asifck439
      @asifck439 3 роки тому +1

      Yes he wrote all methods and state from the beginning itself then only he handle the input field but still we can understand if we have lil konowledge about react

    • @letsdoeverythinginoneweek9398
      @letsdoeverythinginoneweek9398 3 роки тому +1

      @@asifck439 actually there are lots of things going on which are connected with each other but he wrote the things first which comes in last

  • @marshallmurray8050
    @marshallmurray8050 3 роки тому +32

    When I was looking for React tutorials, everyone was throwing shade at To Do apps. You made a great tutorial and I learned a lot! Thanks.

  • @codedcarbon3493
    @codedcarbon3493 2 роки тому +41

    css for near the end of the tutorial:
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
    }
    body {
    background: linear-gradient(
    90deg,
    rgba(48, 16, 255, 1) 0%,
    rgba(100, 115, 255, 1) 100%
    );
    }
    .todo-app {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 520px;
    min-height: 600px;
    background: #161a2b;
    text-align: center;
    margin: 128px auto;
    border-radius: 10px;
    padding-bottom: 32px;
    }
    h1 {
    margin: 32px 0;
    color: #fff;
    font-size: 24px;
    }
    .complete {
    text-decoration: line-through;
    opacity: 0.4;
    }
    .todo-form {
    margin-bottom: 32px;
    }
    .todo-input {
    padding: 14px 32px 14px 16px;
    border-radius: 4px 0 0 4px;
    border: 2px solid #5d0cff;
    outline: none;
    width: 320px;
    background: transparent;
    color: #fff;
    }
    .todo-input::placeholder {
    color: #e2e2e2;
    }
    .todo-button {
    padding: 16px;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    outline: none;
    background: linear-gradient(
    90deg,
    rgba(93, 12, 255, 1) 0%,
    rgba(155, 0, 250, 1) 100%
    );
    color: #fff;
    text-transform: capitalize;
    }
    .todo-input.edit {
    border: 2px solid #149fff;
    }
    .todo-button.edit {
    background: linear-gradient(
    90deg,
    rgba(20, 159, 255, 1) 0%,
    rgba(17, 122, 255, 1) 100%
    );
    padding: 16px 22px;
    }
    .todo-container {
    display: flex;
    flex-direction: row;
    position: relative;
    }
    .todo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px auto;
    color: #fff;
    background: linear-gradient(
    90deg,
    rgba(255, 118, 20, 1) 0%,
    rgba(255, 84, 17, 1) 100%
    );
    padding: 16px;
    border-radius: 5px;
    width: 90%;
    }
    .todo-row:nth-child(4n + 1) {
    background: linear-gradient(
    90deg,
    rgba(93, 12, 255, 1) 0%,
    rgba(155, 0, 250, 1) 100%
    );
    }
    .todo-row:nth-child(4n + 2) {
    background: linear-gradient(
    90deg,
    rgba(255, 12, 241, 1) 0%,
    rgba(250, 0, 135, 1) 100%
    );
    }
    .todo-row:nth-child(4n + 3) {
    background: linear-gradient(
    90deg,
    rgba(20, 159, 255, 1) 0%,
    rgba(17, 122, 255, 1) 100%
    );
    }
    .icons {
    display: flex;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    }
    .delete-icon {
    margin-right: 5px;
    color: #fff;
    }
    .edit-icon {
    color: #fff;
    }

    • @mydaily21
      @mydaily21 2 роки тому

      at 20.00 mnt, im stuck beacuse error. and after checked in console have notice :
      react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
      any one have solutiion?

  • @TahirHussain-ep9us
    @TahirHussain-ep9us 2 роки тому +28

    your are just typing the code, please try to explain what does those function do. so that it will be easy to understand.

  • @johnherrera5913
    @johnherrera5913 3 роки тому +2

    Master! This video answered all the questions I was having with React! Thank you!

  • @PurityNetwork
    @PurityNetwork 3 роки тому +344

    Luckily I wasn't completely new to React because in all honesty this wasn't a very well planned out tutorial for beginners.
    From a learning perspective, it was hard to follow as you declared functions several times before they were written.
    It probably does make complete sense to someone well versed in React because you can do them in whatever order (as you know how to tie them up ultimately) but as a novice, it's hard to follow and understand.
    However that criticism aside, I really enjoyed making this application and have subbed for more.

    • @kauserjaffari9790
      @kauserjaffari9790 3 роки тому +38

      Thanks for saving my
      50 minutes :)

    • @MM-lo9tk
      @MM-lo9tk 3 роки тому +19

      Nah he just doesn't know what he's doing. It's easier to make a UA-cam channel and pretend you know how to code than it is to just learn to code and get a job...
      I see it ALL the time.

    • @auto-nomadic1326
      @auto-nomadic1326 3 роки тому +20

      @@MM-lo9tk Lol chill out bro, he is on a "coding journey", learning by teaching. Haters gonna hate.

    • @masamune1
      @masamune1 3 роки тому +9

      agreed, he really didnt make it beginner friendly. For sure should not decalre things before he even writes them. was confused for so much of it. I think he needs to redo the video, and do one step at a time.

    • @andikasujanadi
      @andikasujanadi 3 роки тому +1

      im on you

  • @klhmia
    @klhmia 3 роки тому +2

    I noticed a few comments in here that are critical but respectful and hit on a crucial point for your channels content in general - the things you create are amazing, elegant, and beautiful, but the way you explain them is not very effective. The order in which you do things is perhaps convenient based on the template you've created, but from a learning perspective it's hard to see what's going on let alone draw those necessary correlations. I'm familiar with React, so I can see what's going on, but that only makes it clearer how strange the approach to some of these things is.
    That being said, I only take the time to write this comment because I love the concept of your channel, your developments are beautiful, and you're a cool dude so I'd love to see you get more views and subs. I'd also love to be able to use your videos to learn more!

  • @ScottKoons1993
    @ScottKoons1993 3 роки тому

    Excellent tutorial!! Thanks for all the hard work. Love your entire channel

  • @poeticider
    @poeticider 2 роки тому +1

    Thanks man. I wanted to get a project done in react before moving on to learning back-end stuff. This got me there, will have some fun playing about with the CSS tomorrow!

    • @mydaily21
      @mydaily21 2 роки тому

      at 20.00 mnt, im stuck beacuse error. and after checked in console have notice :
      react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
      any one have solutiion?

  • @mehdiostadd
    @mehdiostadd 2 роки тому

    thanks for this great tuturial. i needed a toturial like this to have a good training project and really enjoyed of coding this app . i'll follow the entire of your channel bro ;)

  • @S_Chandra503
    @S_Chandra503 3 роки тому +39

    Again good tutorial. One request is that while using any inbuild function, feature from react for example useEffect method then please explain its significance and why we should use it if time permits. This can clear React fundamentals as well.

  • @misterjoe2669
    @misterjoe2669 3 роки тому +7

    This was a great app. Local storage add on would be nice with this app.

  • @mahmoudiamir
    @mahmoudiamir 2 роки тому +2

    Brian thanks alot for put some effort and time to make a tutorial for people, I really appreciate, one that I need to mention is that since you have already mastered react, it's so easy for you to understand why you are doing something as simple as writing some thing to fix the button which refresh the page instead of send some information, but for me as a beginner, it's so hard to decode what you wrote there, as I need to understand how would that send information to database or something.
    So please keep your cool work up, and add some more details

    • @mydaily21
      @mydaily21 2 роки тому

      at 20.00 mnt, im stuck beacuse error. and after checked in console have notice :
      react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
      any one have solutiion?

  • @numberoneBORON
    @numberoneBORON 2 роки тому

    beautiful! I loved the tutorial! I learned so much!

  • @user-gy2kt8oj8e
    @user-gy2kt8oj8e 2 роки тому

    Thank you very much, my friend! I think this world is getting better thanks to you!! )

  • @codedcarbon3493
    @codedcarbon3493 2 роки тому +4

    Thank you so much for this brilliant tutorial, I had not a clue about react before today. I still have a long way to go but feel confident I can get there from this tutorial. Clear, concise, transparent and fun. Genuine thanks.

  • @moosaraza7584
    @moosaraza7584 Рік тому +4

    The reason why console.log(...todos) not printing the latest added element is because setTodos is setting the value to todos. React doesn't immediately do that and it also takes a callback. So, javascript generally doesn't wait the setTodos to finish its work and console the items it have on todos. React plans out the re-rendering of the component when the state is updated. It doesn't do that immediately.

  • @DrewNorman
    @DrewNorman 3 роки тому

    Dude you are the best man. I dig your videos

  • @pjguitar15
    @pjguitar15 3 роки тому +1

    Thank you so much for this tutorial. I helps a LOOOT of people with their developing careers including me as an intermediate learner. Keep on uploading :)

  • @MegaTommy105
    @MegaTommy105 Рік тому

    banger as always. Keep it up!

  • @gonzaloairasca1647
    @gonzaloairasca1647 2 роки тому

    Sos un grande amigo, gracias por subir este contenido!!

  • @longphamvan5314
    @longphamvan5314 2 роки тому

    Thank you for the starter project that I worked on

  • @gloryths
    @gloryths 3 роки тому +4

    Not for absolute beginners but its a good video in order to get an idea of what's going on.

  • @dannychun924
    @dannychun924 2 роки тому +2

    Great tutorial ! I learned a lot, thank you for taking the time to make this I found it very helpful!!

  • @jscrack8443
    @jscrack8443 3 роки тому

    Superb Brian..... Keep it up :)

  • @raffascardamaglia7679
    @raffascardamaglia7679 3 роки тому +1

    thanks dude im always learning more!!

  • @jsonhackademics
    @jsonhackademics 2 роки тому

    thanks for this video. I've been learning & coding in JavaScript since January and although it took me 2 days, I was able to build my first app.

    • @mydaily21
      @mydaily21 2 роки тому

      at 20.00 mnt, im stuck beacuse error. and after checked in console have notice :
      react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
      any one have solutiion?

  • @Aziz-kw6ct
    @Aziz-kw6ct 4 місяці тому

    Great tutorial! You taught me code and a great attitude. Excellent instructions, thanks!

  • @iwnl
    @iwnl 3 роки тому +1

    I am having an issue and I want to know if this is just a limitation of the way its programmed or if i messed up. When editing a todo and then submitting the edit. the content of the other edits disappear. Any fixes?

  • @ravenhooper9263
    @ravenhooper9263 Рік тому

    works perfect, I definitely subscribed...thanks!!!!

  • @andrewkorsten2423
    @andrewkorsten2423 2 роки тому

    great beginner tut for the todo in react!

  • @TheArestus
    @TheArestus 3 роки тому

    Good day! Could you tell me how to bind each input to the list of elements, and when entering text into an input, it would be displayed in the line below the element ?

  • @iwnl
    @iwnl 3 роки тому +1

    This was great. tysm

  • @thalibarrifqi
    @thalibarrifqi 3 роки тому +5

    I just started learning react, and i learn so much from you, are you going to make a crud project using react and firebase?

    • @briandesign
      @briandesign 3 роки тому +1

      Ill make one in the future once I have more time

  • @mustafakosmaz7509
    @mustafakosmaz7509 3 роки тому

    by help of this extensively great tutorial i fixed my whole problms thanks very much

  • @nataliiachaikovska4
    @nataliiachaikovska4 3 роки тому +2

    Thank you so much!
    You did a great job!
    I wish you health and success!!!
    With love from Ukraine :)

    • @nosairabor766
      @nosairabor766 Рік тому

      hope you're safe amidst the crisis? :)

  • @producedjc1703
    @producedjc1703 3 роки тому +3

    Fire. Not for the true beginners, but it was a good struggle and learning experience for a lvl 3 like me.

    • @MegaTommy105
      @MegaTommy105 Рік тому

      it was light work for a guy like me (mentally unstable)

  • @SpyFromMarsZeus
    @SpyFromMarsZeus 3 роки тому

    You saved my life, thank you!

  • @cosminvalentinionita5743
    @cosminvalentinionita5743 3 роки тому

    Great vid helped a lot!

  • @isurukumarasiri7358
    @isurukumarasiri7358 2 роки тому

    superb tutorial. works great

  • @jtoomay9102
    @jtoomay9102 2 роки тому

    Awesome Tutorial!

  • @hacksbyjohn1188
    @hacksbyjohn1188 2 роки тому +23

    Setting Id incrementally, zero to infinite instead of having random number in a range:
    const [id, setId] = useState(0);
    const giveId=()=>{
    setId(id + 1)
    return id;
    }
    const handleSubmit = (e)=> {
    e.preventDefault();
    props.onSubmit({
    id: giveId(),
    text:input
    });
    setInput("");
    };

    • @mydaily21
      @mydaily21 2 роки тому

      at 20.00 mnt, im stuck beacuse error. and after checked in console have notice :
      react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
      any one have solutiion?

  • @Esxae
    @Esxae 3 роки тому +5

    So glad i came across your channel, this was a great tutorial! Would it be possible to create a part 2 to this? i'd love to learn how you'd store the to-do list data so that it doesn't clear out on refreshes, perhaps using firebase realtime database?

    • @briandesign
      @briandesign 3 роки тому +3

      Hey, thanks for commenting! So you could implement localstorage to save the data, but firebase would prob be better since it's saved there. There's plenty of other todo app tutorials I've seen where they implement firebase/local storage that you could simply add to the code I made for this app if you wanted to do it now.
      I'll most likely update all my projects with firebase or backend in the future, but for now you could probably find a few resources to get started on youtube

    • @mohammedraquib6195
      @mohammedraquib6195 Рік тому

      Can you please share me the source code please? Iam stuck with an error props.submit is not a function.

  • @jonasrocha2836
    @jonasrocha2836 Рік тому

    AMAZING Rich!

  • @roadofdragon
    @roadofdragon 3 роки тому

    keep going bro, great tutorial

  • @KeelanJon
    @KeelanJon 3 роки тому +1

    Hi Brian, thanks for the great tutorial, your react website tutorials are some of the best on UA-cam. I've completed this successfully but there's a strange behavior I noticed on both yours and my own that I couldn't figure out. Considering we log the todos after every submission, why does the first not show when we click add for the first time? They always seem a task behind in the log? Strange stuff.

    • @briandesign
      @briandesign 3 роки тому

      hmm I'll have to check that out. If you find a solution, feel free to let me know

    • @KeelanJon
      @KeelanJon 3 роки тому

      @@briandesign Lol just figured it out via of course StackOverflow. It's due to useState not being synchronous. Not sure if links are permitted in your comment section but I'll leave this here should you be interested, or be it useful to anyone else: stackoverflow.com/questions/28773839/react-form-onchange-setstate-one-step-behind.

    • @briandesign
      @briandesign 3 роки тому +1

      stackoverflow saving the day haha. I'll check that post out! Thanks for sharing Keelan

  • @kaanzenginer4699
    @kaanzenginer4699 Рік тому

    which extensions are in use during this tutorial? which one autofills the html tags and which extension organised the code in the input tag for you?

  • @omidmorshedzade7551
    @omidmorshedzade7551 2 роки тому

    Thank you. It was very good. I wish you success

  • @simonetrita
    @simonetrita 2 роки тому

    Man thank you for this.

  • @Ashton-mx2bg
    @Ashton-mx2bg 2 роки тому

    most excellent my dude

  • @eduardoavellan6421
    @eduardoavellan6421 3 роки тому

    Awesome video, but if i would like to shared the value of the input with another component how do i do?, with redux {dispatcher, etc}?

  • @MrSantino3
    @MrSantino3 2 роки тому

    Really helpful , nice UI

  • @deleteduser5336
    @deleteduser5336 3 роки тому

    i would have loved to see a save feature i would have used this for my everyday needs

  • @nguyenxuantrong3034
    @nguyenxuantrong3034 2 роки тому

    Great tutorial ! I learned a lot, thanks for share this video

    • @mydaily21
      @mydaily21 2 роки тому

      at 20.00 mnt, im stuck beacuse error. and after checked in console have notice :
      react-dom.development.js:86 Warning: You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
      any one have solutiion?

  • @muhammadhamzashabbir8364
    @muhammadhamzashabbir8364 3 роки тому +2

    Help Please !!! I am getting Error
    TypeError: Cannot read property 'map' of undefined

  • @LuciferMorningstar-bj5fh
    @LuciferMorningstar-bj5fh 2 роки тому

    Tks man, u help me so much!

  • @rohanjoshi8420
    @rohanjoshi8420 3 роки тому

    Awesome videos it helps me alot

  • @mohammedtalhi666
    @mohammedtalhi666 3 роки тому

    Thanks dude , keep going !

  • @niloofar3463
    @niloofar3463 3 роки тому

    Awsome, subbed.
    can you make a number guessing game in React js as well? with reset, clear and submit button, or how many attempts are left?

  • @alexlavertyau
    @alexlavertyau 3 роки тому +1

    Could you do a follow up tutorial on how to persist this To do list to a database?

  • @brocode1240
    @brocode1240 2 роки тому

    thanks for make this video im do excited when I learn it with your video, I like your explaintation.

  • @IbrahimIceCold
    @IbrahimIceCold 3 роки тому

    thank you, master!

  • @mohanedradhouani4153
    @mohanedradhouani4153 2 роки тому +1

    have issue in the minit 32
    cant add item in the fields ??
    any help please ?

  • @joethomas1995
    @joethomas1995 3 роки тому +8

    This app shows the importance of having a centralized state , the prop drilling is serious here

    • @elliottarnold9542
      @elliottarnold9542 3 роки тому +2

      Exactly, and it's not really helpful that functions are declared before he actually writes the functionality for the function.

    • @laturchasanket6901
      @laturchasanket6901 3 роки тому +2

      @@elliottarnold9542 yeah, its creating a lot of confusion

    • @elliottarnold9542
      @elliottarnold9542 3 роки тому

      @@laturchasanket6901 It happens on his videos. He just needs to commit to one thing at a time; he assumes we already have the end in mind as he does since he is the creator. When someone is coding along, the process needs to be linear.

    • @laturchasanket6901
      @laturchasanket6901 3 роки тому +1

      @@elliottarnold9542 Exactly! Nice catch.

  • @g43s
    @g43s 3 роки тому

    19:44 cant get passed this, the console throws me this error "Warning: Expected `onSubmit` listener to be a function, instead got a value of `string` type"
    also the e.preventDefault method didnt prevented the from reloading

  • @eladon19153
    @eladon19153 2 роки тому

    Can someone explain to me on 37:37
    - what is that 'prev' variable in the setTodos ? if I put a function in it with parameter, the parameter will be the entire todos?
    also, how does the second form [when editing] disappear after submiting? the first one always stays so why does the other one just disappear? [asking code wise, I understand why it's gone - its only for edit]
    tnx

  • @lojicjay
    @lojicjay 3 роки тому

    Question: How does submitUpdate get a value passed to it? When we call submitUpdate when don't pass a value as an argument.

  • @sumanthapamagar6878
    @sumanthapamagar6878 2 роки тому

    When we update the to-do item, the text gets changed but the id for that item is set to NaN. Is there any way to tackle this?

  • @niralidholariya8238
    @niralidholariya8238 3 роки тому

    i see your all videos AND i like your videos

  • @ironmanlifts
    @ironmanlifts 3 роки тому +3

    Thanks for the tutorial. For newbies out there like me looking to clone, the public folder and index.html is not included so you will get errors with npm. :) Just thought Id mention that.

  • @amilkarcruz6117
    @amilkarcruz6117 3 роки тому

    Great video, thanks bro 👏👏👏👏

  • @utahshu
    @utahshu 3 роки тому

    Super fun!

  • @franciscoolivares7068
    @franciscoolivares7068 Рік тому

    Super Thanks bro!

  • @EmotionalGaurav
    @EmotionalGaurav 2 роки тому

    Thanks for the tutorial.....Can you help me with one more thing.....How to store the same code in local storage so that whenever the browser is refreshed the list remains. Thanks in advance.

  • @khuloodfahad7485
    @khuloodfahad7485 3 роки тому

    Thank you so much!

  • @kirtisoni6076
    @kirtisoni6076 2 роки тому

    can someone explain me the edit part of the application. how did it work and all?

  • @coriariasgibert9945
    @coriariasgibert9945 2 роки тому

    Fantastic ❤️ thanks

  • @rajbannasa7662
    @rajbannasa7662 2 роки тому

    Thank you so much sir ❤️

  • @avinashsinghaniya8033
    @avinashsinghaniya8033 3 роки тому +1

    I created but when I am going with edit button it's editing options is coming but when I edit and add again edit showing error :- props.onSubmit is not a function iside TodoForm ????? Please resolve as soon I'm stuck in last minute 🙄

  • @addacdd
    @addacdd 3 роки тому +3

    CSS File to save you all time.
    {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
    }
    body {
    background: linear-gradient(
    90deg,
    rgba(48, 16, 255, 1) 0%,
    rgba(100, 115, 255, 1) 100%
    );
    }
    .todo-app {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 520px;
    min-height: 600px;
    background: #161a2b;
    text-align: center;
    margin: 128px auto;
    border-radius: 10px;
    padding-bottom: 32px;
    }
    h1 {
    margin: 32px 0;
    color: #fff;
    font-size: 24px;
    }
    .complete {
    text-decoration: line-through;
    opacity: 0.4;
    }
    .todo-form {
    margin-bottom: 32px;
    }
    .todo-input {
    padding: 14px 32px 14px 16px;
    border-radius: 4px 0 0 4px;
    border: 2px solid #5d0cff;
    outline: none;
    width: 320px;
    background: transparent;
    color: #fff;
    }
    .todo-input::placeholder {
    color: #e2e2e2;
    }
    .todo-button {
    padding: 16px;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    outline: none;
    background: linear-gradient(
    90deg,
    rgba(93, 12, 255, 1) 0%,
    rgba(155, 0, 250, 1) 100%
    );
    color: #fff;
    text-transform: capitalize;
    }
    .todo-input.edit {
    border: 2px solid #149fff;
    }
    .todo-button.edit {
    background: linear-gradient(
    90deg,
    rgba(20, 159, 255, 1) 0%,
    rgba(17, 122, 255, 1) 100%
    );
    padding: 16px 22px;
    }
    .todo-container {
    display: flex;
    flex-direction: row;
    position: relative;
    }
    .todo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px auto;
    color: #fff;
    background: linear-gradient(
    90deg,
    rgba(255, 118, 20, 1) 0%,
    rgba(255, 84, 17, 1) 100%
    );
    padding: 16px;
    border-radius: 5px;
    width: 90%;
    }
    .todo-row:nth-child(4n + 1) {
    background: linear-gradient(
    90deg,
    rgba(93, 12, 255, 1) 0%,
    rgba(155, 0, 250, 1) 100%
    );
    }
    .todo-row:nth-child(4n + 2) {
    background: linear-gradient(
    90deg,
    rgba(255, 12, 241, 1) 0%,
    rgba(250, 0, 135, 1) 100%
    );
    }
    .todo-row:nth-child(4n + 3) {
    background: linear-gradient(
    90deg,
    rgba(20, 159, 255, 1) 0%,
    rgba(17, 122, 255, 1) 100%
    );
    }
    .icons {
    display: flex;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    }
    .delete-icon {
    margin-right: 5px;
    color: #fff;
    }
    .edit-icon {
    color: #fff;
    }

  • @reactify4719
    @reactify4719 3 роки тому +1

    I have a question...
    const submitUpdate = value => {
    updateTodo(edit.id, value);
    setEdit({
    id: null,
    value: ''
    });
    };
    if (edit.id) {
    return ;
    }
    but you didint give any parameter for submitUpdate Function. how it take its value to update?

  • @yuri_cmps
    @yuri_cmps 3 роки тому

    Hey dude, thanks you for share your knowledge

  • @deleteduser5336
    @deleteduser5336 3 роки тому

    how can i get emmet for jsx like for me i cant just type input and it does it i have to do manually

  • @rafiqjarjous7542
    @rafiqjarjous7542 2 роки тому

    could someone please explain the spread operator usage in the TodoList at 18:53
    thank you!

  • @mostafababaei3431
    @mostafababaei3431 2 роки тому

    I write the codes as you. But whenever I type in anything in the input I get this error on the console:
    A component is changing a controlled input to be uncontrolled...

  • @damian5879
    @damian5879 2 роки тому +1

    wrote code like u and got error Uncaught TypeError: Cannot read properties of undefined (reading 'text') in props.onSubmit.
    Please help!

  • @oskarolortegui9623
    @oskarolortegui9623 3 роки тому +5

    where does ever the property "is Complete" appear? I mean the object created only has "id" and "text" as keys but even "text" is changed for "value" I'm really confuse

    • @muhammedaltay3705
      @muhammedaltay3705 2 роки тому

      did you find where 'isComplete' appeared? I am really confused.

  • @fashionwala5472
    @fashionwala5472 3 роки тому +1

    Bro, it's awesome, thank you so much..but can i make it responsive by using media query in css file

    • @briandesign
      @briandesign 3 роки тому

      Thanks! Yeah you'd just have to customize the CSS for it to be mobile responsive

  • @hamidasharifova6208
    @hamidasharifova6208 Рік тому

    Where did the props.edit come from in TodoForm? I don't see that props passed in the ToDoList component

  • @stmseek7609
    @stmseek7609 2 роки тому

    Thank you so much. What is them you used?

  • @osamamalik3290
    @osamamalik3290 2 роки тому

    How do you gave addTodo the parameter value of todo and then used todo.text
    is it coming from the child component cause you haven't returned any value from there.
    correct me if I'm wrong

  • @RumikoR27
    @RumikoR27 2 роки тому

    I have an error that says props are undefined. Any suggestions? I followed the video.

  • @ojaswijoshi4414
    @ojaswijoshi4414 2 роки тому

    Thank you!

  • @bakareabayomi4320
    @bakareabayomi4320 Рік тому

    Thanks a lot.

  • @emenikedaniel
    @emenikedaniel 2 роки тому

    When you said, this line of code you dont need to understand in it at 17.40 in your video. Man, i laughed really hard cos javascript is jst complex. We just have to learn everyday.

  • @sevketparlak3941
    @sevketparlak3941 Рік тому

    Good Project Thanks..🤓

  • @athraafaraj8387
    @athraafaraj8387 2 роки тому

    how can i make each bullet list of li has special color?

  • @wei7360
    @wei7360 11 місяців тому

    thanks for the tutorial. i can see your variable params are set to a redish pinkish color. Can you teach me how to set those changes? I tried tokencolorcustomization but it seems to highlight other variables too :'(

  • @hrithikanagire5134
    @hrithikanagire5134 2 роки тому

    Can someone explain the todo.isComplete I didn't get where did we declared its initial value??

  • @slaincore
    @slaincore 3 роки тому

    Just instant like =)