Soy nuevo en react y estoy creando mi primera aplicación crud con Mysql/react/express js.
Mi problema es que no puedo renderizar el cuerpo de la tabla debido a que los datos que estoy recibiendo al parecer no los estoy almacenando bien.
Los datos los obtengo de una consulta sql, y creo el cuerpo de la tabla mediante la función map, el error que obtengo es que map no es una función.
Muchas gracias por adelantado
Table.js
function SimpleTable(props) {
return (
<Paper className={props.root}>
<Table className={props.table}>
<TableHead>
<TableRow>
<TableCell>Familia</TableCell>
<TableCell numeric>Genero</TableCell>
<TableCell numeric>Especie </TableCell>
<TableCell numeric>Calidad </TableCell>
<TableCell numeric>Tamaño </TableCell>
<TableCell numeric>Pais </TableCell>
<TableCell numeric>Comentario </TableCell>
<TableCell numeric>Precio </TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.datos.map(molusco => {
return (
<TableRow >
<TableCell component="th" scope="row">
{molusco.familia}
</TableCell>
<TableCell numeric>{molusco.genero}</TableCell>
<TableCell numeric>{molusco.especie}</TableCell>
<TableCell numeric>{molusco.calidad}</TableCell>
<TableCell numeric>{molusco.tamaño}</TableCell>
<TableCell numeric>{molusco.pais}</TableCell>
<TableCell numeric>{molusco.comentario}</TableCell>
<TableCell numeric>{molusco.precio}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SideBar from './sideBar'
import Table from './table'
class App extends Component {
render() {
return (
<SideBar>
<Table datos={rows}/>
</SideBar>
);
}
}
export default App;
var rows= fetch('/express')
.then(function(response) {
console.log(response)
return response;
})
.then(function(myJson) {
console.log(myJson);
});
console.debug(rows)
console.log(rows)
Server.js
const express = require('express');
const app = express();
var mysql = require('mysql');
const port = process.env.PORT || 5000;
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'shells'
});
connection.connect();
// console.log that your server is up and running
app.listen(port, () => console.log(`Listening on port ${port}`));
// create a GET route
app.get('/express', (req, res) => {
// res.send({ saludo: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' });
connection.query('select * from shell', function(err, rows, fields) {
res.send(JSON.stringify(rows));
});
});