Динамически отображать список элементов в реакции на основе возвращенных данных о базе данных

Question

Этот проект является компонентом построения колоды для настольной игры.

Учитывая прототип для моих карт существ (creature.js) и панель, на которой будут отображаться карты (CardPanel.js), янеобходимо динамически визуализировать теги «существо» внутри «.cardRow».В настоящее время запрос магазина возвращает все карточки, содержащие выбранный тип 'cult' из входных данных выбора 'cultFilter'.Как я могу использовать функцию handlChange для визуализации тега «существо» для каждого набора возвращенных данных карты?

import React, { Component } from 'react'
import './Creature.css'
import Emblem from '../../img/emblem_macabre.png'
import Macabre from '../../img/macabre.jpg'
import * as firebase from 'firebase'
import RotateEmblem from '../../img/rotateEmblem.png'

class Creature extends Component {

  constructor() {
    super()
    this.state = {
      cardType: '',
      cult: '',
      cultId: '',
      creatureType: '',
      description: '',
      devotion: '',
      health: '',
      influence: '',
      name: '',
      ritualPower: ''
    }
  }

  componentDidMount() {
    console.log('creature Mounted')

    const firestore = firebase.firestore();
    const settings = {/* your settings... */ timestampsInSnapshots: true};
    firestore.settings(settings);

    const dbRef = firebase.firestore()
    const creatureCards = dbRef.collection('creatureCards')

    // Define creature card
    // 1. Input for dynamic name search
    const searchedCard = creatureCards.doc('foresworn-mistress-the-witch')

    searchedCard.onSnapshot(doc => {
      const data = doc.data()

      let cardType = data.cardType
      let cult = data.cult
      let cultId = data.cultId
      // let creatureType = data.creatureType
      let description = data.description
      let devotion = data.devotion
      let health = data.health
      let influence = data.influence
      let ritualPower = data.ritualPower
      let name = data.name

      this.setState({
        cardType: cardType,
        cult: cult,
        cultId: cultId,
        description: description,
        devotion: devotion,
        health: health,
        influence: influence,
        ritualPower: ritualPower,
        name: name
      })
    })

  }

  render() {
    return(
      <div className="creatureCardWrap">
        <div className="rotateEmblem">
          <img src={RotateEmblem} alt=""/>
        </div>
        <div className="creatureCard">
          <span className="creatureName">{this.state.name}</span>
          <span className="creatureArt"><img src={Macabre} alt=""/></span>
          <ul className="creatureAttributes">
            <li className="creatureAttribute">{this.state.ritualPower}</li>
            <li className="creatureAttribute">{this.state.devotion}</li>
            <li className="creatureAttribute">{this.state.influence}</li>
            <li className="creatureAttribute">{this.state.health}</li>
          </ul>
          <span className="creatureDescription">
            <p>{this.state.description}</p>
          </span>
          <div className="emblem">
            <img src={Emblem} alt=""/>
          </div>
          <div className="creatureMeta">
            <span className="cardType">{this.state.cardType}</span>
            <span className="cultId">{this.state.cultId}</span>
          </div>
        </div>
      </div>
    )
  }
}

export default Creature

import React, { Component } from 'react'
import Creature from '../../components/Card_Creature/Creature'
import './CardPanel.css'
import * as firebase from 'firebase'

class CardPanel extends Component {
  constructor() {
    super()
    this.state = {
      cardType: '',
      cult: '',
      cultId: '',
      creatureType: '',
      description: '',
      devotion: '',
      health: '',
      influence: '',
      name: '',
      ritualPower: ''
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    let eventValue = event.target.value
    console.log(eventValue)

    const firestore = firebase.firestore();
    const settings = {/* your settings... */ timestampsInSnapshots: true};
    firestore.settings(settings);

    const dbRef = firebase.firestore()
    const creatureCards = dbRef.collection('creatureCards')

    const cults = creatureCards.where('cult', '==', eventValue).get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          console.log(doc.id, '=>', doc.data())
          // Create creature tags based on this data

        })
      })


    this.setState({cult: event.target.value})
  }

  render() {
    return(
      <div className="cardPanel">
        <div className="filterRow">
          <select className="cultFilter" value={this.state.cult} onChange={this.handleChange}>
            <option value=""></option>
            <option value="occult">Occult</option>
            <option value="eldrich">Eldrich</option>
          </select>
          <select className="creaturetypeFilter">
            <option value="adept">Adept</option>
            <option value="priest">Priest</option>
            <option value="mage">Mage</option>
          </select>
        </div>
        <div className="cardRow">
          {/*Need to append create creature tags here*/}
          <Creature />
        </div>
      </div>
    )
  }
}

export default CardPanel

Answer 1

Как я уже сказал в комментариях, попробуйте сохранить снимок в состоянии и отобразить на нем:

import React, { Component } from 'react'
import Creature from '../../components/Card_Creature/Creature'
import './CardPanel.css'
import * as firebase from 'firebase'

class CardPanel extends Component {
  constructor() {
  super();

  this.state = {
  creatureCards: [],
  cardType: '',
  cult: '',
  cultId: '',
  creatureType: '',
  description: '',
  devotion: '',
  health: '',
  influence: '',
  name: '',
  ritualPower: ''
  }

  this.handleChange = this.handleChange.bind(this)
}

handleChange(event) {
let eventValue = event.target.value
console.log(eventValue)

const firestore = firebase.firestore();
const settings = {/* your settings... */ timestampsInSnapshots: true};
firestore.settings(settings);

const dbRef = firebase.firestore()
const creatureCards = dbRef.collection('creatureCards')

const cults = creatureCards.where('cult', '==', eventValue).get()
  .then(snapshot => {
    this.setState({creatureCards: snapshot.val()})
  })


    this.setState({cult: event.target.value})
}

  render() {
    return(
  <div className="cardPanel">
    <div className="filterRow">
      <select className="cultFilter" value={this.state.cult} onChange={this.handleChange}>
        <option value=""></option>
        <option value="occult">Occult</option>
        <option value="eldrich">Eldrich</option>
      </select>
      <select className="creaturetypeFilter">
        <option value="adept">Adept</option>
        <option value="priest">Priest</option>
        <option value="mage">Mage</option>
      </select>
    </div>
    <div className="cardRow">
    {
      this.state.creatureCards.map(card => {
       return <Creature {...card} />
      })
    }

    </div>
  </div>
)
  }
}

export default CardPanel