Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

474
Vistas
Dropzone : TypeError: children is not a function

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.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda