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

[@nik3935]

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

[@kalaik7562]

Yes 100%

[@Zack-tx7oz]

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!

[@aarthiaarthi6236]

Helpful , simplest way ✨

[@IamM1101]

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

[@nelliecrocker4487]

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]

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

[@rachandeepkaur8245]

This video resolve my issue, thank you so much.

[@rollybarinan6563]

very nice tutorial .. very appreciated

[@annabergin5803]

Really clearly explained and easy to follow :)

[@SoundousTaleb]

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

[@lasanthanalaka7404]

Nice example thanks

[@elodiebouthors8382]

It is not working for me. Is someone available to look at my code ? thanks

[@plelkes]

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

[@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]

thank you so much! i was confused!!!

[@girmatesfaye7507]

Thank you! this is very useful tutorial

[@Vinodkumar1805]

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

[@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....)

[@Pareshbpatel]

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

[@sabaris2008]

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

[@mr6462]

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

[@Human_Evolution-]

Great stuff but I would prefer making API calls instead of mock JSOn and all that. It would make it much more re-usable and real world.

[@dReasdReas]

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]

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) =>

[@hollywoodedge]

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

[@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?

[@1234554321marcus1]

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

[@kuddam]

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

I have no words... simply PERFECT;

[@LNMLucasMasiero]

thanks you so much!

[@EdgarLindo]

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

[@Otacon_1]

hi i keep getting this error msg everytime i click on the edit button? Can someone help me please?? Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/EditableRow.7de6e3415d0588f68de5') is not a valid name.

[@PritamTirpude23]

Very Helpful.....👍

[@mahithmahi9446]

Hii I need Help can you help mee please . Can you create On Account Detail Page --> Create a custom button --> Once you click on button it should naviage to lightning Page which will populate all contact associated with that account. (User Lightning data table to show entire list ) .--> there should be three button for each row (View / edit / Delete).' Slove this task.

[@ingreed4154]

Helloo, anyone knows how can I add the key prop to a table? This a great example on how to making one, but i have the "your children need a prop key" error. How can I fix this for a table?

[@souravbera1465]

Thank you so much

[@samvelpetrosyan494]

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

[@kashafsshauqat1834]

Warning: Each child in a list should have a unique "key" prop. what will be the solution for this error!?

[@ywsefalmohtaseb6620]

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

[@Pontuzs]

Where do I asign a "key" to this code? I get an error that "each child in a list should have a unique "key" props.

[@ashfregor43]

When you map an array to div for example. Put a key prop to it. For example, {contact.number}

[@크라우드-m3u]

ur tutorial is very good but plz speak more clearly(pronunciation) and slowly :)

[@prernavishwakarma932]

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

[@junevadil8933]

comnts on these kinds of videos and I know for a fact that guys like Nice tutorialm have gotten strikes from KZbin for having crack info in their

[@jerrylouis8602]

im having an issue with saving the current edit state. when it refreshed it goes back to before. that also goes for the delete button. the information stays. Could it be because of the json ?

[@fehmiig]

hey i have an error in tsx file that line 12:51 : newFormData[fieldName] = fieldValue; how can i fix that ?

[@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

[@Nitean-s3c]

AYY IM NOT FAN BEEN DOING IT OK BANDLAB HAHAH

[@Gandeloft]

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.

[@tiagopetinga6496]

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

[@erichsieh6596]

17:29 if I want to store the data into the mock-json file, how do I implement it?

[@surajsangale2823]

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

[@vigneshboopathy2377]

Can anyone tell me how to empty the text box after it is getting submitted

[@singhvimlesh]

Sir one doubt if I add new row it should be added at first and then next or old one.so how can do?

[@codingwitheric]

Hey man great videos! Any plans to make some new ones? Either way, I appreciate the ones you’ve made

[@AMITKUMAR-rt1ig]

Awesome video eith easy explaination❤

[@JatinSaini-cv8vm]

I want to place add module and table in different pages but it is not adding data to table when i use it on diff page please tell how i can place data in database for permanent

[@SiddharthSingh-vu1ke]

on clicking save after editing a row, I get this error "TypeError: contacts.map is not a function". Please help.

[@mohamedabdelwahidi569]

Thank you so much , how can I keep data after inserting without refreshing ?

[@GoodToCU88]

Many different ways. One way is server side with database or front end cache like local storage

[@mtsurov]

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

[@reynaldo0779]

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]

I added this at the end of handleAddFormSubmit method: setAddFormData({ fullName: "", address: "", phoneNumber: "", email: "", })

[@reynaldo0779]

Also added the value property to the input boxes of the add forms like this: value={addFormData.fullName}

[@reynaldo0779]

Add a Contact Add

[@KarthikVairavan32]

Great tutorial. However, my inline edits do not seem to be saving, when I edit, the row becomes blank. Does anybody have a solution?

[@nasa-eemadadam2213]

Thanks Chris, This is what I looking for 😊

[@vishalgatla4606]

Awesome content 👍☺️

[@Ro_builds]

Thank you for the video. I do have a question. If I am trying to make an axios patch request to my backend database, what would be the best way about going about that? I've been stuck on this for week. This is in regards to the edit functionality.

[@teniolao1]

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

[@VinayKumar-mu9qu]

When i added much data,it keeps on going down.How can i implement a scroll option to the table ? Can anyone help me with that.....!

[@zern0h]

This is really awesome but, you didn't manage to empty the form after the "add" button is clicked and the new contact has been added.

[@sougataganguly126]

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

[@josuevides6151]

Very good job, bro. How I can export this table to excel? Thanks!

[@deepanshsingh7585]

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

[@Sabotronics]

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

[@neets7519]

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

[@olamidetosin1006]

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

[@rothsamnangvisothipong2317]

can you please make more video..

[@rishilapsiwala9503]

Can we keep a dropdown column in the table itself which helps us to select a value from the dropdown list??

[@nischaymehta7172]

Amazing video 💯 Very helpfull.

[@ChrisBlakely]

Thanks for watching !

[@zeeshanbanedar5556]

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

[@muhammadrifqy24]

wht should I do if I want the Form in the different page, not in the same page with the dashboard

[@MrKD-dt9ff]

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

[@user-zArs25]

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

[@DigitalSoap]

[@nnnabbot]

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

[@vishwajitnalawade6033]

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

[@Ghost-zi2eo]

can you share the vs code extension

[@cosmasthuku9914]

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

[@palakbatraaaa]

very confusing !!

[@vasifmammadov5236]

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]

i had a hard time understanding this complex comment :)

[@joshc3000]

It's just HTML, not HaychTML Bro!

[@thiagoberton149]

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

[@ianvieira283]

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

[@bravo1oh1]

just started react. like the style of ur explanations

[@ruthlimachi825]

THANK YOU. Aweson tutorial

[@Maaa4216]

Great video bro thanks bro

[@SamriBliss]

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

[@fastscript1343]

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

[@haldaneprince184]

Excellent! Very helpful

[@antonklochkov3416]

thank you, make subtitles for Russians please

[@JGODonoghue]

That was amazing! So helpful, thank you for sharing

[@tinytales40]

Extremely helpful. Thank you Chris!

[@udaysingh9375]

great video but how can we add check box to this?

[@cigmaian7139]

how can i integrate e search bar to filter the table after names?

[@judahgeorge2949]

You're videos are really good Chris,

[@kristel9136]

Hi. how to save on state when i make changes like add edit delete

[@mohamedyoussef8835]

Awesome video +++++++++++++++++ 😃

[@vidnchi7178]

Thank you very much