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.
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
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?
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....)
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!
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
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?
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.
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! :)
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) =>
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
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!!
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
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
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.
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?
every mentor should watch this...how to make a good content and practical content .This is lit..
Very elegant coding and clearly explained! I am writing to express my gratittude for this invaluable lesson regarding the topic.
CRUD on Table in React. Beautifully explained. Thank you.
{2021-12-18] - {2021-12-21} {2022-02-23}
Extremely practical content...! The content that actually new reactjs learner want! Thank you! Loved it!
Yes 100%
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.
i had a hard time understanding this complex comment :)
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
this tutorial is so awesome, i learn how to manage state fluently
just started react. like the style of ur explanations
Thank You Very Much.
This is the best video to get a basic understanding on how things work in react.
I have watched many video ,but your way of explanation is great , Extremally Helpful
Many thanks to the author. In fact, I do not speak English well, but I understood all the material.
I have no words... simply PERFECT;
Helped me with my project, easy to add axios calls with params as well when using states like this. Hats off👏🏼
Thank You So Much. Was struggling to implement Inline Edit for the last 2 days. Very Helpful
Thanks, great tutorial. It would be nice to add a function to clear the inputs after adding a new contact.
Thanks to @ Chris Blakely for the great video. Can you please tell me * How to clear add form after submit *
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?
Create Functions and pass them in onClick attributes of Edit and Delete buttons
This video resolve my issue, thank you so much.
This what I'm looking for last one week... Thanks bro... Really too good... I'm using yours code.
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!!!
Thanks Chris, This is what I looking for 😊
Nice one.. thanks a lot, it really helped me in my exams
clean and sleek. i think ive just discovered my new tut hero. thank you.
how i can put this table in page of my pages in my project ???
super helpful tutorial, well structured code and easy to understand. thanks Chris!
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.
Thanks for a basic how to for non react-table demo
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?
Thank you so much
Chris Blakely. Well pragmatically presented, easy to understand and follow. Tutorial is well structured. Once again Thank you :)
ohh my God i was so lost ffor days thinking of how to implement that inline edit .....thanks man
This content is highly enlightening, thanks for sharing your knowledge
Extremely helpful. Thank you Chris!
Very well structured and concise tutorial. As a beginner this video is a treat.
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....)
Awesome video eith easy explaination❤
This is amazing! Well structured, and beautifully presented, THANKYOU!!!
Helpful , simplest way ✨
It looks simple, but a lot of things to learn from here.
Thanks to Blakely.
that's the second video that saved mylife, ur awesome!
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!
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
Excellent! Very helpful
Another great tutorial! Thank You so very much!
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.
thank you so much! i was confused!!!
This is the most help full video
That was amazing! So helpful, thank you for sharing
very nice tutorial .. very appreciated
Thank you, this just what I needed.
Excellent video and great content! Thank you very much!! Keep going!!
You're videos are really good Chris,
Fantastic this time too! Very useful!
Thanks for watching ! Glad you liked it
Plz make a video on create a table in angular. Same structure like that this video...
Thank you
Awesome tutorial! Thanks Chris!
Thanks for this wonderful cake. I have subscribed and liked it and will share with friends to do so too...
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?
I added this at the end of handleAddFormSubmit method:
setAddFormData({
fullName: "",
address: "",
phoneNumber: "",
email: "",
})
Also added the value property to the input boxes of the add forms like this: value={addFormData.fullName}
Add a Contact
Add
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.
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! :)
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) =>
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
Very nice tutorial, leared a lot! Thank you!
Wow 49 minutes video for you, 3 hours for me. Awesome tutorial, looking forward to more of your content.
Awesome content 👍☺️
Really clearly explained and easy to follow :)
Great tutorial, thanks a lot!
This content is dopee!!! Never seen a better video on react js tables❤️❤️TQSM
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!!
Thank you so much for the video.
Thank you, this was awesome
How to write/delete element in json file in this code ?
plz upload videos regularly .
thank u so much for your video, It helped so much
Very good job, bro. How I can export this table to excel? Thanks!
Amazing man, thanks for this!
Very simple... say... would you have a video in which you filter data instead of adding and deleting?
Nice example thanks
Very good tutorial
Thanks!!!
Thank you! this is very useful tutorial
How do you set to blank values the input boxes once you add a new record to the table?
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
thank you so much !!! helped a lot
THANK YOU. Aweson tutorial
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
Amazing video 💯 Very helpfull.
Thanks for watching !
this is the BEST!!
great video but how can we add check box to this?
Really helpful bro 🖤🖤
Great video bro thanks bro
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.
Hey man great videos!
Any plans to make some new ones? Either way, I appreciate the ones you’ve made
Hi Chris, can you make the same tutorial with typescript implementation?
You say "our" like if you were a pirate hahaha, good video really helpful
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?
Can we keep a dropdown column in the table itself which helps us to select a value from the dropdown list??
another great tutorial!!! thanks
11:19 what default event are we preventing by using event.preventdefault() ?
Thank you.
Thank you so much , how can I keep data after inserting without refreshing ?
Many different ways. One way is server side with database or front end cache like local storage
thank you but you shuid use event.target.reset(); to clear input value after submit Add
Great video I must say.
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.
you deserve more subscribers than this
Thank you so much!
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.