Using a list inside another list


#22

Hi Antti. I tested several times your demo and looks like it has the same problem. Please take a look at the prints. I never commented on Pauli’s post. This happen right after you post a new Status. Not a comment.


#23

Actually, data are saved in the right place and data slots are alright. Feed is messy only after making a new Post Status. if you go to another screen and come back, everything will be fine.


#24

Yeah it’s probably about that state is not updated for list items with arrays because the comments array is not created the “standard React Studio way”. I’ll check this with developer tomorrow.


#25

great! wishing they will find the solution. Thank you []


#26

Hi, I discussed with developer and the issue is in the Code template and how React updates lists. Here’s a new code template for my demo project:

import React, { Component } from ‘react’;
import ‘./App.css’;
{{IMPORTS}}
import firebase from ‘firebase’;

export default class {{CLASS_NAME}} extends Component {

{{PROPERTIES}}

constructor(props) {
super(props);

this.state = {

{{INITIAL_STATE_PROPS}}
};
}

_updateItems = (docKey) => {
const db = firebase.firestore();
const collection = db.collection(SocialFeed/${docKey}/comments);
this._cancelSnapshot = collection.onSnapshot(
(querySnapshot) => {
let jsonArr = [];
let key = 0;
querySnapshot.forEach((doc) => {
const data = { …doc.data(), key: key++, document_key: doc.id, document_ref: doc.ref };
jsonArr.push(data);
});
this.setState({_items: jsonArr, _itemsDocKey: docKey});
}
);
}

componentDidMount() {
{{COMPONENT_DID_MOUNT_CODE}}
this._updateItems(this.props.dataSheetRow.document_key);
}

componentWillUnmount() {
{{COMPONENT_WILL_UNMOUNT_CODE}}
this._cancelSnapshot();
}

componentDidUpdate() {
{{COMPONENT_DID_UPDATE_CODE}}
let itemsDocKey = this.props.dataSheetRow.document_key;
if (this.state._itemsDocKey && this.state._itemsDocKey !== itemsDocKey) {
this._cancelSnapshot();
this._updateItems(itemsDocKey);
}
}

componentWillReceiveProps(nextProps) {
{{COMPONENT_WILL_RECEIVE_PROPS}}
}

{{METHODS}}
}

In case the forum breaks the code here it is in text file: https://s3.amazonaws.com/sc.neonto.com/example_projects/socialFeed_PostItem_template_new.txt.zip


#27

Awesome Antti! And again, thank you for sharing such good tool