React Dynamic Table | Programming Tutorial

Introduction

In this lab, we will explore how to use React to dynamically render a table with rows created from an array of primitives. Specifically, we will utilize the Array.prototype.map() method to map each item in the data array to a …


This content originally appeared on DEV Community and was authored by Labby

Introduction

MindMap

In this lab, we will explore how to use React to dynamically render a table with rows created from an array of primitives. Specifically, we will utilize the Array.prototype.map() method to map each item in the data array to a <tr> element with an appropriate key and display it in a table with two columns: ID and Value. By the end of this lab, you will gain a better understanding of how to use React to create dynamic and responsive tables.

Data Table

index.html and script.js have already been provided in the VM. In general, you only need to add code to script.js and style.css.

Create a table element with two columns, ID and Value, where each row is generated dynamically from an array of primitive values.

To accomplish this, use the Array.prototype.map() method to create a new array of JSX elements representing each item in the input data array as a <tr> element with an appropriate key. Within each <tr>, add two <td> elements to display the row's index and value respectively.

Here's an example implementation:

const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

To use this component with an array of people's names, for example, you can call it as follows:

const people = ["John", "Jesse"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <DataTable data={people} />
);

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Data Table lab. You can practice more labs in LabEx to improve your skills.

🚀 Practice Now: Dynamic React Table with Primitive Data

Want to Learn More?


This content originally appeared on DEV Community and was authored by Labby


Print Share Comment Cite Upload Translate Updates
APA

Labby | Sciencx (2024-08-01T03:24:51+00:00) React Dynamic Table | Programming Tutorial. Retrieved from https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/

MLA
" » React Dynamic Table | Programming Tutorial." Labby | Sciencx - Thursday August 1, 2024, https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/
HARVARD
Labby | Sciencx Thursday August 1, 2024 » React Dynamic Table | Programming Tutorial., viewed ,<https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/>
VANCOUVER
Labby | Sciencx - » React Dynamic Table | Programming Tutorial. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/
CHICAGO
" » React Dynamic Table | Programming Tutorial." Labby | Sciencx - Accessed . https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/
IEEE
" » React Dynamic Table | Programming Tutorial." Labby | Sciencx [Online]. Available: https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/. [Accessed: ]
rf:citation
» React Dynamic Table | Programming Tutorial | Labby | Sciencx | https://www.scien.cx/2024/08/01/react-dynamic-table-programming-tutorial/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts