score:0
big thanks to dave newton for making me realize i actually did have most of it right. i am not sure what exactly i was confused about, my solution i believe should have been working as far as i know.
big thanks to frank van puffelen who got it. i used the foreach method to take the data from firebase and create a object thingy that worked magically! i wish i understood it. if anyone has any explication that would be great. my whole code is below. my solution is super hacky, but i will refactor later when i know what i am doing more.
import react, { usestate, useeffect } from "react"
import { database } from "../firebase"
export default function datatable(props) {
const [data, setdata] = usestate([])
useeffect(()=>{
var rectradedatabase = database.ref(props.dataname)
rectradedatabase.on('value', (snapshot) => {
//const tableddata = snapshot.val()
setdata([]);
snapshot.foreach(datapiece =>{
setdata(currentdata=>[datapiece.val(),...currentdata])
})
setdata(currentdata=>[].concat(currentdata.slice(0,props.tablecutoff)))
})
},[props.dataname, props.tablecutoff])
const {
title,
columnnames,
id
} = props
/* old way of setting data
function setdataasync(newdata, cutlength){
setdata(arrayofdata => [].concat([newdata,...arrayofdata]))
setdata(truncated => [].concat(truncated.slice(0,cutlength)))
}
*/
return (
<div id={( id || "")} classname="datacontainer">
<div classname="title-line">
<div>{title}</div>
</div>
<div classname="column-titles">
{columnnames.map(dataentry => {
return (
<div classname="title">
<div>{dataentry}</div>
</div>
)
})}
</div>
<div id="data">
{object.keys(data).map( (key)=>{
console.log(data)
return (
<div classname="dataline">
<div>{data[key].one}</div>
<div>{data[key].two}</div>
<div>{data[key].three}</div>
<div>{data[key].four}</div>
<div>{data[key].five}</div>
</div>
)
})}
</div>
</div>
)
}
Source: stackoverflow.com
Related Query
- Finding values or objects in a json file with nested objects and passing the result object to child in Javascript and react
- Rendering complex JSON/Javascript Objects in React
- Rendering React Components from Array of Objects
- You need to enable javascript to run this app response when try to access local json file in react
- Rendering React components from json data dynamically
- Rendering JSON API in react Using map method
- Is it bad to use complex objects in react state?
- Can't access nested JSON Objects in React
- React rendering nested json
- Feed native Javascript objects to React
- ReactJS rendering a collection of children throws "Invariant Violation: Objects are not valid as a React child" error
- Rendering JavaScript Object in React
- Taking React State (object of objects(example inside)) and getting an array of objects to map() for component rendering
- Removing duplicate value from list of javascript objects in react js
- JSON Parse nested objects in React
- Display/Map Nested JSON fields in React JavaScript
- React rendering JSON instead of component on page reload
- How to map array of objects which i need to groupby date property in JSON format with react JS
- What to use as key when rendering a list of elements in react if the objects have no property which can be used as an unique identifier?
- Rendering json object name/description for each object in React
- React JSX: rendering nested arrays of objects
- Syntax error rendering JavaScript as text in React
- React.js: Dynamically create complex DOM from nested JSON before rendering
- React useState not rendering with objects
- Rendering an array of objects React
- How to Sort Dates, Numbers, Strings from the array of nested JSON objects in Javascript
- Converting array objects into json in react
- Combine Objects and place into array - JavaScript / React
- React - Empty Array When Rendering JSON Data
- Combine duplicate tokens inside huge JSON file into nested array of objects using React
More Query from same tag
- Onclick with two functions- React
- Heroku - Node version not specified in package.json while deployment
- Why do i get "Must provide query string" on fetch API but not on cURL or Postman?
- Redux state resets itself on route change (I think)
- ANT JS select not displaying values reactjs
- Changing url based on id and getting values from local storage. ReactJS
- How do I change the background color of a selected react-bootstrap ToggleButton?
- Load jQuery into Mocha test for React App
- State inside mapDispatchToProps
- Img tag src issues
- :ERR_EMPTY_RESPONSE after two minutes timeout -axios-post - nodejs
- How to create an asynchronous function to request data in reactjs?
- import error: './App' does not contain a default export (imported as 'App')
- How do I store an array of objects that have arrays as value in Redux?
- How can I simulate a click on Highchart
- How to re-render after updating useState in React?
- condition based setState for counters
- Type 'undefined' cannot be used as an index type
- IOS-Chrome: While scrolling screen getting freezed
- Redux props are being received in Redux DevTools but not in the React component
- Send data to a route using Express JS when you are serving a static file for React-Router
- why react-select default value doesn't show
- Why is this exception being thrown? Uncaught ReferenceError: React is not defined
- After websocket.close() funtion continues to run
- React/Redux How to filter two array values
- Jest test 'unexpected token export'
- Uncaught TypeError: sweetalert2_react_content_1.default is not a function
- Preloading Google Fonts
- React Module Parse Fails When Adding Images
- Need help importing a variable from a components file to an app.js file(React)