I hope I describe well what I am looking for and use the terminology properly.
I am looking to change the color of the background of a component (a card) based on a value that is supposedly to be stored in the state of the component. I explain this. My component/card is used to list a collection of documents from my Firestore. Within this component I have this code in the script editor:
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();
let userID=this.props.appActions.dataSlots['ds_SlotUserId'];
let preloadID=this.props.dataSheetRow.document_key;
const ref = db.collection('usuarios').doc(userID).collection('scores')
.where('preloadID', '==', preloadID)
this._cancelSnapshot = ref.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({"scores": jsonArr, _itemsDocKey: docKey});
}
);
}
componentDidMount() {
{{COMPONENT_DID_MOUNT_CODE}}
this._updateItems(this.props.document_key);
}
componentWillUnmount() {
{{COMPONENT_WILL_UNMOUNT_CODE}}
this._cancelSnapshot();
}
componentDidUpdate() {
{{COMPONENT_DID_UPDATE_CODE}}
let itemsDocKey = this.props.document_key;
if (this.state._itemsDocKey && this.state._itemsDocKey !== itemsDocKey) {
this._cancelSnapshot();
this._updateItems(itemsDocKey);
}
}
{{METHODS}}
}
That allows to store some values from a different collection within that same component. I am already showing some of the values in an embedded component.
I would like to change the background color based on “followMode” wich is a field in the collection that I assume is in the “scores” array. However when I try to point it I don’t know how to do it.
I would really appreciate some guidance about how to achieve this.
Thank you.