Fill color of a background based on a state value

[petoma]

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.

[petoma]

I achieved it with a workaround and I don’t know if I complicated things too much. I created another component which basically the background. Then I inserted a list/grid in the main component using this background component and added the state. That way I could user the followMode property in the Nested comp tab.

I was thinking about doing this but with the background Element instead of an independent component but if it works, it’s fine for me.

What I am dealing with now is the color. I am not able to get a gradient color! I don’t know if it is me, or the option is not there. I drawed a rectangle and selected the two colors in the tool but I just get one or the other and I don’t see any place where to indicate the gradient between the two.

I also could use the script with an if statement, but I don’t how to a gradient color in a script. I am able to do it with solid color without any issue.

Thank you.