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>
    )
}

Related Query

More Query from same tag