Create a Table in React | Learn how to view, add, delete and edit rows in a table from Scratch

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 187

  • @nik3935
    @nik3935 2 роки тому +35

    Extremely practical content...! The content that actually new reactjs learner want! Thank you! Loved it!

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

    To make a simple explanation is always harder than a complex explanation. Unfortunately, understanding a simple explanation is easier than a complex explanation. It was the simplest explanation I have ever seen on youtube. Thank you.

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

      i had a hard time understanding this complex comment :)

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

    CRUD on Table in React. Beautifully explained. Thank you.
    {2021-12-18] - {2021-12-21} {2022-02-23}

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

    every mentor should watch this...how to make a good content and practical content .This is lit..

  • @KyleKatarn145
    @KyleKatarn145 Рік тому +1

    Very nice tutorial. I appreciate you're one of the few people who teach what I think is the best way of passing state change down into child components, by creating event handlers instead of just straight up passing the setState down into the child component

  • @mr6462
    @mr6462 10 місяців тому

    Very elegant coding and clearly explained! I am writing to express my gratittude for this invaluable lesson regarding the topic.

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

    I have no words... simply PERFECT;

  • @nelliecrocker4487
    @nelliecrocker4487 3 роки тому +17

    This was one of the most helpful videos I've watched regarding React, props, and so many other things. THANK YOU. My only question is how to link this up with a local server and use PUT and DELETE to modify the data in the server?

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

      Create Functions and pass them in onClick attributes of Edit and Delete buttons

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

      This video resolve my issue, thank you so much.

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

    this tutorial is so awesome, i learn how to manage state fluently

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

    I have watched many video ,but your way of explanation is great , Extremally Helpful

  • @nasa-eemadadam2213
    @nasa-eemadadam2213 7 місяців тому

    Thanks Chris, This is what I looking for 😊

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

    Many thanks to the author. In fact, I do not speak English well, but I understood all the material.

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

    just started react. like the style of ur explanations

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

    Thanks to @ Chris Blakely for the great video. Can you please tell me * How to clear add form after submit *

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

    Thank You So Much. Was struggling to implement Inline Edit for the last 2 days. Very Helpful

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

    Helped me with my project, easy to add axios calls with params as well when using states like this. Hats off👏🏼

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

    This what I'm looking for last one week... Thanks bro... Really too good... I'm using yours code.

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

    Nice one.. thanks a lot, it really helped me in my exams

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

    Thank You Very Much.
    This is the best video to get a basic understanding on how things work in react.

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

    Thanks, great tutorial. It would be nice to add a function to clear the inputs after adding a new contact.

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

    super helpful tutorial, well structured code and easy to understand. thanks Chris!

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

    I just want to say thank you so much! I learned a lot about how React works thanks to this GREAT and WONDERFUL tutorial. Many thanks!!!

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

    clean and sleek. i think ive just discovered my new tut hero. thank you.

  • @Zack-tx7oz
    @Zack-tx7oz 2 роки тому

    Hi, Chris!
    I've greatly enjoyed your video, and by far this was one of the most helpful videos on creating a table in React that uses CRUD. It helped that you explained what some lines of codes were for. I'll definitely be referring to you again!
    Thank you, and much appreciated!

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

    Thank you so much
    Chris Blakely. Well pragmatically presented, easy to understand and follow. Tutorial is well structured. Once again Thank you :)

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

    Helpful , simplest way ✨

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

    ohh my God i was so lost ffor days thinking of how to implement that inline edit .....thanks man

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

    Very well structured and concise tutorial. As a beginner this video is a treat.

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

    This is amazing! Well structured, and beautifully presented, THANKYOU!!!

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

    Thanks for a basic how to for non react-table demo

  • @haldaneprince184
    @haldaneprince184 9 місяців тому

    Excellent! Very helpful

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

    extremely helpful on that code where you use If else condition while coding editForm. I was stuck at it and I have to follow your piece of code.

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

    Your videos are excellent. Very thought-through and fantastic explanations to understand things clearly. Thank you very much and keep up the fabulous work. :) XD

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

    Extremely helpful. Thank you Chris!

  • @AMITKUMAR-rt1ig
    @AMITKUMAR-rt1ig 9 місяців тому

    Awesome video eith easy explaination❤

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

    Wow 49 minutes video for you, 3 hours for me. Awesome tutorial, looking forward to more of your content.

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

    that's the second video that saved mylife, ur awesome!

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

    This content is highly enlightening, thanks for sharing your knowledge

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

    Fantastic this time too! Very useful!

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

      Thanks for watching ! Glad you liked it

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

    This content is dopee!!! Never seen a better video on react js tables❤️❤️TQSM

  • @mestayno
    @mestayno Рік тому +1

    if you find yourself not being able to type in the edit form, it's because you need to give the input defaultValue={ something } not just value.

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

    This is the most help full video

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

    i loved your Note Taking App video! you really did explain everything (including CSS, unlike other people who tells to copy paste) from basic.
    would appreciate if you try making a bigger project which elevates the level.
    thank you!!

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

    You're videos are really good Chris,

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

    Awesome tutorial! Thanks Chris!

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

    Thank you, this just what I needed.

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

    That was amazing! So helpful, thank you for sharing

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

    Really clearly explained and easy to follow :)

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

    Another great tutorial! Thank You so very much!

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

    It looks simple, but a lot of things to learn from here.
    Thanks to Blakely.

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

    Excellent video and great content! Thank you very much!! Keep going!!

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

    this is the BEST!!

  • @MrKD-dt9ff
    @MrKD-dt9ff 3 роки тому +2

    just leaving this tip here
    You can add a fragment inside the render without needing to import anything from react
    So instead of writing
    you can just replace it with
    and react instantly knows its a fragment

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

    Plz make a video on create a table in angular. Same structure like that this video...
    Thank you

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

    Amazing man, thanks for this!

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

    You say "our" like if you were a pirate hahaha, good video really helpful

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

    Very nice tutorial, leared a lot! Thank you!

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

    How to write/delete element in json file in this code ?

  • @danidaniela2777
    @danidaniela2777 Рік тому +1

    Very educational tutorial, I like how it is explained but, I have a question... how do we keep the data in this table saved when we refresh?

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

    Great tutorial, thanks a lot!

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

    Thank you, this was awesome

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

    Awesome content 👍☺️

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

    very nice tutorial .. very appreciated

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

    thank u so much for your video, It helped so much

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

    How do you set to blank values the input boxes once you add a new record to the table?

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

    Thank you! this is very useful tutorial

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

    Amazing video 💯 Very helpfull.

  • @MuhammadAhmed-wb2sq
    @MuhammadAhmed-wb2sq 2 роки тому

    Thank you so much for the video.

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

    Great video bro thanks bro

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

    Very good tutorial
    Thanks!!!

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

    Nice example thanks

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

    Thanks for this wonderful cake. I have subscribed and liked it and will share with friends to do so too...

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

    Really helpful bro 🖤🖤

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

    thank you so much !!! helped a lot

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

    THANK YOU. Aweson tutorial

  • @denniskoros4559
    @denniskoros4559 Рік тому +1

    The content is really insightful , one question is how would you approach it using an API with full CRUD functionality in mind...(for instance using the fetch or rather the axios.get/put and so on....)

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

    another great tutorial!!! thanks

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

    Thank You.

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

    thanks man💯💥

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

    Thank you!!!

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

    Thank you very much

  • @SoundousTaleb
    @SoundousTaleb 10 місяців тому +1

    how i can put this table in page of my pages in my project ???

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

    I've been trying to figure out how to make the values of a table which arederived from objects received from an API editable for 2 hours now.
    I'm going to sleep trusting that this is what will provide me with the know-how.
    Just started with React.

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

    Very simple... say... would you have a video in which you filter data instead of adding and deleting?

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

    thank you but you shuid use event.target.reset(); to clear input value after submit Add

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

    Great video I must say.

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

    simply amazing !

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

    Thank you so much!

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

    How does one go about assigning unique keys to all contacts and emptying the input fields once the submit button has been used?
    Thank you for a great tutorial! :)

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

      I used index as a parameter of the map function, worked fine. I passed it as a prop when making it modular but it no longer works for some reason. Edit: I added key to the component and that fixed it. so: .map((workOrder, index) =>

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

    savior

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

    Very Helpful.....👍

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

    Hi I am Sabaris. I saw the notes making tutorial I followed this to make edit option in that but not working the note becomes blank with edit button and delete button and nothing inside the note. please make part 2 for notes app. I would be greatful if you make edit option in notes as tutorial please

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

    Thank you, Sir

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

    this was a great tutorial. Your explanation is amazing!!!💖

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

    awesome!

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

    how to move add contact form to the another page and link through the button

  • @محمودأحمدعبدالفتاحأحمدبسيوني

    Please Keep going ❤❤❤

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

    Hi Chris! it´s the first time I see your solution @13:15 I'm using the component approach, where I´ve the state in app.js and form och table in seperate component. How can I apply your code? I´ve managed the table component, but not the form component :-(
    Thanks in advance
    //Peter

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

    11:19 what default event are we preventing by using event.preventdefault() ?
    Thank you.

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

    you deserve more subscribers than this