<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
['Name', 'Age', 'Email'],
['John Doe', 25, 'john@example.com'],
['Jane Smith', 30, 'jane@example.com'],
['Michael Johnson', 28, 'michael@example.com'],
['Emily Brown', 22, 'emily@example.com'],
['William Lee', 35, 'william@example.com'],
['Sophia Kim', 29, 'sophia@example.com'],
['James Wilson', 31, 'james@example.com'],
['Olivia Davis', 27, 'olivia@example.com'],
['Alexander Taylor', 26, 'alexander@example.com'],
['Ava Anderson', 24, 'ava@example.com'],
// Add more rows as needed
const generateCSV = () => {
let csvContent = 'data:text/csv;charset=utf-8,';
csvData.forEach((row) => {
const csvRow = row.join(',');
csvContent += csvRow + '\r\n';
const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'data.csv');
document.body.appendChild(link);
document.body.removeChild(link);
<div className='container'>
<h3 style={{ color: '#333' }}>React Js Export Data to CSV file</h3>
backgroundColor: '#007bff',
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);