Как переключить кнопку в приложении реагировать на огонь

Question

Я создаю приложение React с базой данных Firebase, и концепция приложения - «добавить в избранное». Точнее, пользователь может искать элемент в строке поиска и добавлять каждый результат в свою коллекцию, нажимая кнопку «Добавить в коллекцию». При желании пользователь может удалить элемент из своей коллекции, нажав кнопку «удалить из коллекции». Все отлично работает!

Все работает нормально, но я бы хотел, чтобы кнопка «добавить в коллекцию» исчезла, если у пользователя уже есть элемент в его коллекции, и это кнопка «удалить», которая должна отображаться. И наоборот.

У кого-нибудь есть идея? Я пытаюсь сделать это в течение двух дней, но безрезультатно.

Это мой код:

function addToCollection(hit) {
  const userUid = firebase.auth().currentUser.uid;
  const item = hit
  const ref = hit.objectID 

  firebase.database().ref(`users/${userUid}/collection/${ref}`).update(item);

}

function removeToCollection (hit){
  const userUid = firebase.auth().currentUser.uid;
  const ref = hit.objectID 

  firebase.database().ref(`users/${userUid}/collection/${ref}`).remove();
}


const Hit = ({hit}) =>
    <div className="item">
        <img src={hit.avatarURL} width={150} height={150}></img>
        <h1 className="marque">{hit.marque}</h1>
        <h3 className="numero">{hit.numero}</h3>
        <h4 className="reference">{hit.reference}</h4>
        <h4 className="marquesuite">{hit.marquesuite}</h4>
        <p className="cote">{hit.cote}</p>
        <button className="btn btn-success" onClick={() => addToCollection(hit)}>Add to Collection</button>
        <button className="btn btn-danger" onClick={() => removeToCollection(hit)}>Remove to Collection</button>
    </div>



const Content = () =>
  <div className="text-center">
    <Hits hitComponent={Hit}/>

  </div>






class Catalogue extends React.Component {
  constructor(props){
    super(props);
    this.state = { favorited: this.props.isFavorite };
  }


  render(){

    if(this.state.catalogue === null) {
      return  <p>Le catalogue est vide</p>

    }

      return (
        <div class="container-fluid text-center">
          <h1 className="text-center">Catalogue de capsule</h1>


          <InstantSearch
            apiKey="b91d4104964a4a28c5f99e41484b09ec"
            appId="ZHUPJYFJTW"
            indexName="catalogue">


            <SearchBox translations={{placeholder:'Rechercher une capsule'}}/>



            <Content />  



          </InstantSearch>

        </div> 

      );
  }
}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Catalogue);

Заранее благодарю за помощь.

Answer 1

const Hit = ({hit}) =>{
    let itemExists = fasle;
    const itemRef= new Firebase(`users/${userUid}/collection`)
    itemRef.child(hit.objectID).once('value', (snapshot) => {
     itemExists = (snapshot.val() !== null);
     });
    return (<div className="item">
             /*other tags*/
         {itemExists ?
            <button className="btn btn-danger" onClick={() => removeToCollection(hit)}>Remove to Collection</button> : 
            <button className="btn btn-success" onClick={() => addToCollection(hit)}>Add to Collection</button>
          }
    </div>)}