How To Create Dynamic Table In React JS #reactjs #programming #frontend #webdevelopment

(We're free online community, meet other makers!)

#react #reactjs #tutorial #coding #webdev #webdevelopment #programming

In this tutorial I'll show you how to create and render your own custom dynamic HTML table in React. Without libraries, modules or packages of any sorts.

"Dynamic Table" can mean a lot of things. (Dynamic React tables are usually created to sort columns, delete rows, check which rows or columns to exclude, and filtering table data by some search query or condition.)

This Dynamic React table tutorial is a universal starting point, whatever you're trying to create.

This is just the workflow to creating your own dynamic table in React. In next tutorial I'll show you how to delete rows, etc.

We're going to render a list of rows from an array of values (city name, and temperature.) To actually render a list of table rows we're going to use the JavaScript Array's built in function map, which works well for rendering lists of React components.

Keywords:
How To create dynamic table in React

Video Chapters:
00:00 How to create a dynamic table in React (Where to start)
00:37 How to disable React strict mode (to avoid calling constructor twice)
01:18 Creating data array to pass into react table
01:42 Import useState hook
02:06 Create rows data set to our App component as a state object
02:22 Initialize our rows object with cities array
02:42 How to create table row in React
04:10 How to create your own table component in React from scratch
04:53 How to render a list of rows in a custom React table
06:19 Using our custom table component in our main App component to render a basic HTML table (without using other libraries)
06:48 Launching our app to render our custom React table

[softwaretestinglearninghub]

Thank you for this video. Used to get confused with different states when was learning React. Great to review it again.

[oliverhansen]

how can you do this with only an array of numbers?