import React, { Component } from 'react'
import Table from 'react-bootstrap/Table'
import ReactFileReader from 'react-file-reader'
export default class TableMap extends Component {
// constructor(props) {
// super(props);
// this.updateData = this.updateData.bind(this);
// }
state = {
iGorMap: [
{
"FiduciaryOutsourcingField": "ID",
"YourField": ""
},
{
"FiduciaryOutsourcingField": "CreateDate",
"YourField": ""
},
{
"FiduciaryOutsourcingField": "UpdateDate",
"YourField": ""
},
{
"FiduciaryOutsourcingField": "RecordStatus",
"YourField": ""
},
{
"FiduciaryOutsourcingField": "Source",
"YourField": ""
},
]
}
renderDropdownValues() {
function convertJson(csvData) {
var temp = csvData.split("\n");
var temp2 = temp[0].split(",");
return temp2;
}
}
renderTableData() {
return this.state.iGorMap.map((iGorMap, index) => {
const { FiduciaryOutsourcingField, YourField } = iGorMap //destructuring
return (
<tr key={FiduciaryOutsourcingField}>
<td>{FiduciaryOutsourcingField}</td>
<td>
<div className="dropdown" role="combobox" >
<select className="browser-default custom-select">
{/* <option selected>{this.state.csvData}</option> */}
{this.renderDropdownValues()}
<option>{this.state.temp2}</option>
</select>
</div>
</td>
</tr >
)
})
}
renderTableHeader() {
let header = Object.keys(this.state.iGorMap[0])
return header.map((key, index) => {
return <th className="tableHeader" key={index}>{key}</th>
})
}
render() {
return (
<div>
<ReactFileReader
multipleFiles={false}
fileTypes={[".csv"]}
handleFiles={this.handleFiles}
>
<button type='button' className="btn btn-success">Upload</button>
</ReactFileReader>
<Table bordered hover striped>
<thead className="thead-dark" id="top">
<tr>
{this.renderTableHeader()}
</tr>
</thead>
<tbody>
{this.renderTableData()}
</tbody>
</Table>
</div>
)
}
handleFiles = files => {
var reader = new FileReader();
var temp2;
reader.onload = e => {
// Use reader.result
var filein = reader.result;
var temp = filein.split("\n");
temp2 = temp[0].split(",");
// var tempArr = temp2.split(",")
this.setState({
temp2
});
};
reader.readAsText(files[0]);
console.log(temp2);
};
};
The handleFiles function at the bottom is what is giving me the most trouble. I need to display each item in the temp2 array in its own option in the drop down select box. Any Help would be greatly appreciated.
Hey RandellDawson I understand and agree and here you go. https://codesandbox.io/s/cocky-https-sy36l?fontsize=14
I figured out how to do it. I had to create a state for the options and then set that state and update it by cycling through the keys of the options and printing those out.
renderDropdownValues() {
// document.getElementsByName("option").setAttribute("selected")
return this.state.dropOpt.map((key, index) => {
// console.log(this.state.FiduciaryOutsourcingField); //! Do Not use creates Infinite loop
if (key === this.state.FiduciaryOutsourcingField) {
console.log("I got here");
return (
<option selected key={index} id={index} className={key}>
{key}
</option>
);
}
return (
<option key={index} id={index} className={key}>
{key}
</option>
);
});
}
//* handleFiles transforms the incoming CSV sheet and returns the header from the first row
handleFiles = files => {
var reader = new FileReader();
var parseConfig = {
delimiter: "", // auto-detect
newline: "", // auto-detect
quoteChar: '"',
escapeChar: '"',
header: true,
transformHeader: undefined,
dynamicTyping: false,
preview: 0,
encoding: "",
worker: false,
comments: false,
step: undefined,
complete: undefined,
error: undefined,
download: false,
skipEmptyLines: true,
chunk: undefined,
fastMode: undefined,
beforeFirstChunk: undefined,
withCredentials: undefined,
transform: undefined,
delimitersToGuess: [",", "\t", "|", ";", Papa.RECORD_SEP, Papa.UNIT_SEP]
};
//* All configuration options for "unparsing" JSON back to CSV
//TODO: unparseConfig not currently used will need to use in full production.
// var unparseConfig = {
// quotes: false, //or array of booleans
// quoteChar: '"',
// escapeChar: '"',
// delimiter: ",",
// header: true,
// newline: "\n",
// skipEmptyLines: true, //or 'greedy',
// columns: null //or array of strings
// };
//* reads incoming CSV file within the browser and parses the header of the first row
reader.onload = e => {
var fileIn = reader.result;
var fileInParsed = fileIn.replace(/(00\/00\/0000)/g, ""); // Removing 00/00/00 dates
var csvData = Papa.parse(fileInParsed, parseConfig);
//* csvData.data is the grouping of Objects
var dataJson = csvData.data;
var jsonKeys = Object.keys(dataJson[0]);
// console.log(dataJson[0]); //for debugging
// console.log(csvData.data.length); //for debugging
// console.log(jsonKeys); //for debugging
//* breaks out the key and index of the jsonKeys array
return jsonKeys.map((key, index) => {
// console.log("I got here"); //for debugging
// console.log(key, index); //for debugging
return this.setState({
dropOpt: jsonKeys
});
});
};
reader.readAsText(files[0]);
};