Тёмный

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

Chris Blakely
Подписаться 32 тыс.
Просмотров 271 тыс.
50% 1

Опубликовано:

 

21 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 187   
@nik3935
@nik3935 2 года назад
Extremely practical content...! The content that actually new reactjs learner want! Thank you! Loved it!
@kalaik7562
@kalaik7562 2 года назад
Yes 100%
@Pareshbpatel
@Pareshbpatel 2 года назад
CRUD on Table in React. Beautifully explained. Thank you. {2021-12-18] - {2021-12-21} {2022-02-23}
@KyleKatarn145
@KyleKatarn145 Год назад
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
@vasifmammadov5236
@vasifmammadov5236 3 года назад
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 :)
@sougataganguly126
@sougataganguly126 2 года назад
every mentor should watch this...how to make a good content and practical content .This is lit..
@mr6462
@mr6462 10 месяцев назад
Very elegant coding and clearly explained! I am writing to express my gratittude for this invaluable lesson regarding the topic.
@nelliecrocker4487
@nelliecrocker4487 3 года назад
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 года назад
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.
@vishwajitnalawade6033
@vishwajitnalawade6033 2 года назад
Thank You So Much. Was struggling to implement Inline Edit for the last 2 days. Very Helpful
2 года назад
I have no words... simply PERFECT;
@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 😊
@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 года назад
This what I'm looking for last one week... Thanks bro... Really too good... I'm using yours code.
@deepanshsingh7585
@deepanshsingh7585 2 года назад
Thank You Very Much. This is the best video to get a basic understanding on how things work in react.
@bravo1oh1
@bravo1oh1 2 года назад
just started react. like the style of ur explanations
@Vinodkumar1805
@Vinodkumar1805 2 года назад
Thanks to @ Chris Blakely for the great video. Can you please tell me * How to clear add form after submit *
@nnnabbot
@nnnabbot 2 года назад
Many thanks to the author. In fact, I do not speak English well, but I understood all the material.
@fastscript1343
@fastscript1343 Год назад
this tutorial is so awesome, i learn how to manage state fluently
@neets7519
@neets7519 2 года назад
This is amazing! Well structured, and beautifully presented, THANKYOU!!!
@teniolao1
@teniolao1 2 года назад
super helpful tutorial, well structured code and easy to understand. thanks Chris!
@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!
@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!!!
@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 :)
@MerthanMerter
@MerthanMerter 2 года назад
clean and sleek. i think ive just discovered my new tut hero. thank you.
@1234554321marcus1
@1234554321marcus1 2 года назад
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
@hollywoodedge
@hollywoodedge 2 года назад
Nice one.. thanks a lot, it really helped me in my exams
@tinytales40
@tinytales40 2 года назад
Extremely helpful. Thank you Chris!
@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.
@AMITKUMAR-rt1ig
@AMITKUMAR-rt1ig 9 месяцев назад
Awesome video eith easy explaination❤
@retrax80s
@retrax80s 2 года назад
Very well structured and concise tutorial. As a beginner this video is a treat.
@cosmasthuku9914
@cosmasthuku9914 2 года назад
ohh my God i was so lost ffor days thinking of how to implement that inline edit .....thanks man
@haldaneprince184
@haldaneprince184 9 месяцев назад
Excellent! Very helpful
@godwinamadi9287
@godwinamadi9287 2 года назад
This content is highly enlightening, thanks for sharing your knowledge
@Sabotronics
@Sabotronics Год назад
Thanks, great tutorial. It would be nice to add a function to clear the inputs after adding a new contact.
@aarthiaarthi6236
@aarthiaarthi6236 2 года назад
Helpful , simplest way ✨
@SamriBliss
@SamriBliss 3 года назад
Thanks for a basic how to for non react-table demo
@MrKD-dt9ff
@MrKD-dt9ff 3 года назад
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
@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!
@JGODonoghue
@JGODonoghue Год назад
That was amazing! So helpful, thank you for sharing
@woofcode3383
@woofcode3383 2 года назад
Another great tutorial! Thank You so very much!
@mestayno
@mestayno Год назад
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.
@lightanddarkness44
@lightanddarkness44 Год назад
thank you so much! i was confused!!!
@ajeigbejohnoluwaseyi8458
@ajeigbejohnoluwaseyi8458 3 года назад
Awesome tutorial! Thanks Chris!
@thiagoberton149
@thiagoberton149 2 года назад
Excellent video and great content! Thank you very much!! Keep going!!
@tiagopetinga6496
@tiagopetinga6496 2 года назад
You say "our" like if you were a pirate hahaha, good video really helpful
@erikr6293
@erikr6293 3 года назад
Thank you, this just what I needed.
@mansadevi4168
@mansadevi4168 3 года назад
This content is dopee!!! Never seen a better video on react js tables❤️❤️TQSM
@alessandroscimone5463
@alessandroscimone5463 3 года назад
Fantastic this time too! Very useful!
@ChrisBlakely
@ChrisBlakely 3 года назад
Thanks for watching ! Glad you liked it
@danidaniela2777
@danidaniela2777 Год назад
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?
@judahgeorge2949
@judahgeorge2949 2 года назад
You're videos are really good Chris,
@benyaminyakobi3652
@benyaminyakobi3652 3 года назад
Very nice tutorial, leared a lot! Thank you!
@prernavishwakarma932
@prernavishwakarma932 Год назад
Plz make a video on create a table in angular. Same structure like that this video... Thank you
@denniskoros4559
@denniskoros4559 Год назад
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....)
@user-zArs25
@user-zArs25 2 года назад
thank u so much for your video, It helped so much
@DigitalSoap
@DigitalSoap 2 года назад
@pritamdebnath3384
@pritamdebnath3384 2 года назад
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!!
@annabergin5803
@annabergin5803 2 года назад
Really clearly explained and easy to follow :)
@girmatesfaye7507
@girmatesfaye7507 3 года назад
Thank you! this is very useful tutorial
@imransiddiqui5501
@imransiddiqui5501 3 года назад
This is the most help full video
@olamidetosin1006
@olamidetosin1006 2 года назад
Thanks for this wonderful cake. I have subscribed and liked it and will share with friends to do so too...
@ericxcn
@ericxcn 2 года назад
Amazing man, thanks for this!
@dokwunnajurbe3964
@dokwunnajurbe3964 3 года назад
Very good tutorial Thanks!!!
@MuhammadAhmed-wb2sq
@MuhammadAhmed-wb2sq 2 года назад
Thank you so much for the video.
@ruthlimachi825
@ruthlimachi825 3 года назад
THANK YOU. Aweson tutorial
@nischaymehta7172
@nischaymehta7172 3 года назад
Amazing video 💯 Very helpfull.
@ChrisBlakely
@ChrisBlakely 3 года назад
Thanks for watching !
@aaronwilliams5220
@aaronwilliams5220 2 года назад
Thank you, this was awesome
@rollybarinan6563
@rollybarinan6563 2 года назад
very nice tutorial .. very appreciated
@IamM1101
@IamM1101 2 года назад
How to write/delete element in json file in this code ?
@robertkuchta9244
@robertkuchta9244 2 года назад
Great tutorial, thanks a lot!
@Maaa4216
@Maaa4216 2 года назад
Great video bro thanks bro
@rudrakshiseth1045
@rudrakshiseth1045 2 года назад
thank you so much !!! helped a lot
@samvelpetrosyan494
@samvelpetrosyan494 Год назад
How do you set to blank values the input boxes once you add a new record to the table?
@annakimberly3219
@annakimberly3219 2 года назад
this is the BEST!!
@lasanthanalaka7404
@lasanthanalaka7404 2 года назад
Nice example thanks
@tumon001
@tumon001 2 года назад
It looks simple, but a lot of things to learn from here. Thanks to Blakely.
@vidnchi7178
@vidnchi7178 Год назад
Thank you very much
@SoundousTaleb
@SoundousTaleb 10 месяцев назад
how i can put this table in page of my pages in my project ???
@vishalgatla4606
@vishalgatla4606 2 года назад
Awesome content 👍☺️
@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.
@dReasdReas
@dReasdReas 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) =>
@ywsefalmohtaseb6620
@ywsefalmohtaseb6620 2 года назад
thank you but you shuid use event.target.reset(); to clear input value after submit Add
@VidmantasB
@VidmantasB 2 года назад
Thank you!!!
@reynaldo0779
@reynaldo0779 2 года назад
Hello Chris, I really liked the video, very well explained, I just have a question. How do you set to blank values the input boxes once you add a new record to the table?
@reynaldo0779
@reynaldo0779 2 года назад
I added this at the end of handleAddFormSubmit method: setAddFormData({ fullName: "", address: "", phoneNumber: "", email: "", })
@reynaldo0779
@reynaldo0779 2 года назад
Also added the value property to the input boxes of the add forms like this: value={addFormData.fullName}
@reynaldo0779
@reynaldo0779 2 года назад
Add a Contact Add
@bogulztv8554
@bogulztv8554 3 года назад
another great tutorial!!! thanks
@sabaris2008
@sabaris2008 3 года назад
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
@patrikeriksson4019
@patrikeriksson4019 3 года назад
Hi Chris and thank you for a very helpful and pragmatic presentation. If I would like to be able to have more than one row in editmode at the same time, what would you change in this code?
@khangpiano549
@khangpiano549 2 года назад
Thank You.
@krunalpithadia8163
@krunalpithadia8163 Год назад
savior
@elodiebouthors8382
@elodiebouthors8382 3 года назад
It is not working for me. Is someone available to look at my code ? thanks
@YouTubeHyd
@YouTubeHyd Год назад
thanks man💯💥
@milutinac
@milutinac 2 года назад
Thank you so much!
@plelkes
@plelkes 3 года назад
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
@EdgarLindo
@EdgarLindo 2 года назад
Very simple... say... would you have a video in which you filter data instead of adding and deleting?
@ITTamiloffl
@ITTamiloffl 2 года назад
Really helpful bro 🖤🖤
@arupde6320
@arupde6320 3 года назад
plz upload videos regularly .
@محمودأحمدعبدالفتاحأحمدبسيوني
Please Keep going ❤❤❤
@lathashreeg1900
@lathashreeg1900 2 года назад
God bless you 🙏
@kalaik7562
@kalaik7562 2 года назад
Thank you, Sir
@mohamedabdelwahidi569
@mohamedabdelwahidi569 2 года назад
Thank you so much , how can I keep data after inserting without refreshing ?
@GoodToCU88
@GoodToCU88 2 года назад
Many different ways. One way is server side with database or front end cache like local storage
@isafarzullazade900
@isafarzullazade900 2 года назад
thanks a lot
@agentsmith2189
@agentsmith2189 2 года назад
awesome!
Далее
Ромарио стал Ромой
00:46
Просмотров 308 тыс.
Распаковка Monster High Potions №4
00:46
Просмотров 78 тыс.
Context API in react | get the concept
29:00
Просмотров 57 тыс.
The Entire Chess World Is In A State Of Shock
14:30
Просмотров 4,1 тыс.
Ромарио стал Ромой
00:46
Просмотров 308 тыс.