I am trying to send data from a CSV file in POST to an API.
However, I have a problem. I can't display my page, instead I get this error :
TypeError: children is not a function
62 | };
63 | }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
64 |
> 65 | return /*#__PURE__*/React.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
66 | open: open
67 | })));
68 | });
You can see my code below :
import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
import csv from 'csv';
class App extends Component {
onDrop(files) {
this.setState({ files });
let file = files[0];
const reader = new FileReader();
reader.onload = () => {
csv.parse(reader.result, (err, data) => {
let userLists;
userLists = [];
for (let i = 0; i < data.length; i++) {
const name = data[i][0];
const phoneNumber = data[i][1];
const address = data[i][2];
const classType = data[i][3];
const newUser = { "name": name, "phoneNumber": phoneNumber, "address": address, "class": classType };
userLists.push(newUser);
fetch('https://localhost:8080/api/users', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(newUser)
}).then(r => r.result)
}
});
};
reader.readAsBinaryString(file);
}
render() {
const fontSize = 5;
return (
<div align="center" oncontextmenu="return false">
<br /><br /><br />
<div className="dropzone">
<Dropzone accept=".csv" onDropAccepted={this.onDrop.bind(this)}>
<div>
<p>Drop some files here</p>
</div>
</Dropzone>
<br /><br /><br />
</div>
<h2>Upload or drop your <font size={fontSize} color="#00A4FF">CSV</font><br /> file here.</h2>
</div>
)
}
}
export default App;
If you have any ideas, I'm interested. I've never used Dropzone, so it's not very complicated.