Что вы хотите сделать, так это сделать компонент DataTable дочерним по отношению к компоненту Reader. Вам нужен массив объектов из компонента Reader для свойствах строк данных в компоненте DataTable. Как вы сказали, вы новичок, поэтому лучше начинать с ловушек реагирования, поскольку это легко.
Компонент считывателя
import React, {useState} from "react";
import CSVReader from "react-csv-reader";
import DatatablePage from "./dataTable";
import "../index.css";
const Reader = () => {
const [data, setData] = useState([]);
return (
<div className="container">
<CSVReader
cssClass="react-csv-input"
label="Upload a new CSV file"
onFileLoaded={(data) => setData(data)}
/>
<DatatablePage uploadedData={data} />
</div>
);
}
export default Reader;
Компонент DatatablePage
import React from "react";
import { MDBDataTable } from "mdbreact";
const DatatablePage = ({uploadedData}) => {
const data = {
columns: [
{
label: "First Name",
field: "name",
sort: "asc",
width: 150
},
{
label: "Last Name",
field: "surname",
sort: "asc",
width: 270
},
{
label: "Issue count",
field: "issuecount",
sort: "asc",
width: 200
},
{
label: "Date of birth",
field: "dateofbirth",
sort: "asc",
width: 100
}
],
rows: []
};
// we append the passed props in the rows. read about spread operator if unaware of it.
const datatableProps = {...data, rows: uploadedData};
return <MDBDataTable striped bordered hover uploadedData={uploadedData} data={datatableProps} />;
};
export default DatatablePage;
Мы используем ответные ловушки , чтобы создать переменную состояния с именем data и установщик для нее. Затем мы передаем эту переменную состояния дочернему компоненту, который может ее отобразить.