Я хочу показать свои данные CSV по отдельным лицам в модальном окне, нажав кнопку через отображение в реакции

Question

Я могу читать данные CSV через таблицу, и я хочу показать эти данные по отдельным строкам в модальном окне с помощью функции onClick или onDoubleClick в реакции. Это то, что я сделал до сих пор

import React, {Component} from "react";
import PropTypes from "prop-types";
import {
    Table,
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn
} from "material-ui/Table";
import Dialog from "@material-ui/core/Dialog";

export const RowParser = row => {
    const reg = /"(.*?)"/g;
    const matches = row.match(reg);
    if (matches) {
        return matches.map(value => {
            return value.substr(1, value.length - 2);
        });
    }
    return row.split(",");
};

class CSVTable extends Component {
    constructor(props) {
        super(props);
        const {data, header} = this.props;
        const rows = [...data.split("\n")];
        const contentRows = header ? rows.slice(1,rows.length) : rows;
        this.state = {
            open: false,
            title: '',
            contentRows: contentRows
        };

    }

    handleClickOpen=(rowIndex)=> {
        // Do whatever you want with the row data
        const rowData = this.state.contentRows[rowIndex];
        console.log(rowData);
        this.setState({
            open:true

        })
    };

    handleClose = () => {
        this.setState({open: false});
    };

    static propTypes = {
        data: PropTypes.string.isRequired,
        header: PropTypes.bool
    };
    static defaultProps = {
        data: "",
        header: false,

    };

    rowParser = row => {
        return RowParser(row);
    };

    render() {
        const {data, header} = this.props;
        const rows = [...data.split("\n")];
        const contentRows = header ? rows.slice(1,rows.length) : rows;

        return (
            <div>

                <Table>
                    {header && (
                        <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
                            <TableRow>
                                {this.rowParser(rows[0]).map((value, index) => (
                                    <TableHeaderColumn key={index}>{value}</TableHeaderColumn>
                                ))}
                            </TableRow>
                        </TableHeader>
                    )}

                    <TableBody displayRowCheckbox={false}>
                        {contentRows.map((row, rowIndex) => (

                            <TableRow key={rowIndex}  onDoubleClick={this.handleClickOpen}>
                                {this.rowParser(row).map((value, colIndex) => (
                                    <TableRowColumn key={colIndex} data={value}
                                                    style={{cursor: 'pointer'}}>{value}
                                    </TableRowColumn>
                                ))}
                                <button type="button" id ={rowIndex}
                                        onClick={() => this.handleClickOpen(rowIndex)}>
                                    Edit
                                </button>
                            </TableRow>

                        ))}

                        <Dialog open={this.state.open}
                                onClose={this.handleClose} maxWidth={"md"} maxHeight={"md"}>
                            <div  style={{ width: '400px',
                                height: '500px',
                                margin: '55px'}}>
                                {header &&(
                                    <TableHeader adjustForCheckbox={false} displaySelectAll={false}>

                                        <TableRow>
                                            {this.rowParser(rows[0]).map((value, index) => (
                                                <tr key={index}>{value}</tr>

                                            ))}
                                        </TableRow>
                                    </TableHeader>
                                )}
                            </div>
                            <div style={{cursor: 'pointer', margin: '-287px 150px 200px'}}>
                                <TableRow>
                                    {this.rowParser(rows[1]).map((value, colIndex) => (
                                        <tr key={colIndex}>
                                            <input   value={value}/>

                                        </tr>
                                    ))}
                                </TableRow>
                            </div>
                        </Dialog>

                    </TableBody>
                </Table>
            </div>
        );
    }
}
CSVTable.propTypes = {
    fullScreen: PropTypes.bool.isRequired,
};


export default CSVTable;

Я могу читать данные построчно, например, выбирая строки вручную [0,1,2,3 ... и т. Д.]. Но я хочу, чтобы строка заголовка с определенной строкой после нажатия кнопки редактирования. Поэтому я хочу работать динамично. Кроме того, в модальном окне я также хочу отредактировать эти строки, а также могу сохранить эти данные в моей HTML-таблице, которую я анализирую из файла CSV. Любая помощь по этой проблеме будет принята. Извините за обмен слишком много кода. Я надеюсь, что вы не беспокоюсь. Спасибо.