I got stuck with this problem and don't know how to fix it. I set up the server side props and it's working on the terminal on vscode but when i inspect in chrome or try to do something with it well, nothing appears.
export const getServerSideProps = async (context) => {
try {
let properties = []
const propertiesRef = collection(firestore, 'properties')
const q = query(propertiesRef, orderBy("propertiename", "desc"))
onSnapshot(q, (snapshot) => {
properties.push(snapshot.docs.map((doc) => (
{ ...doc.data(), id: doc.id }
)))
console.log(properties)
});
return {
props: {
propertiesProps : properties,
}
}
} catch(error) {
console.log(error)
}
}
When i pass the data here in the page i dont get anything back
function index({propertiesProps}) {
const [properties, setProperties] = useState([])
useEffect(async () => {
setProperties( propertiesProps)
console.log(properties)
}, [])
return (
<div>
<Head>
<title>Rimoz | Properties</title>
</Head>
<h1 className="main">Heres is the list of properties</h1>
<PropertieGallery />
<h1 className="main">Com server side props</h1>
<p></p>
</div>
)
}
export default index
And this is what i get in the terminal on vscode
[
[
{
propertiename: 'casa 57',
photos: [Array],
id: 'lKOfK8oirnLY5DNEJagH'
},
{
propertiename: 'casa 56',
photos: [Array],
id: 'r1IRpreknf5Pd7FqRUqJ'
},
{
photos: [Array],
propertiename: 'casa 55',
id: 'H2ADAlP4dyuZJCsYNnor'
},
{
propertiename: 'casa 54',
photos: [Array],
id: 'dB8wHXjwFHGB3JoIIGQv'
},
{
propertiename: 'casa 4 ',
photos: [Array],
id: 'jApsE2wgxBpdbajuObgx'
},
{
propertiename: 'casa 3 ',
photos: [Array],
id: 'mrOJasIuHUXI5ojISSWD'
},
{
photos: [Array],
propertiename: 'casa 2',
id: 'rBOG1mXUewKYiH47MbdM'
},
{
photos: [Array],
propertiename: 'casa 14',
id: 'c3ozTup7m1ZWIjSSzh7v'
}
]
]
What am i missing here?