मेरे हैंडलक्लिक फ़ंक्शन पर, मैं एक नई सरणी में एक मूवी जोड़ रहा हूं। हालांकि, मैं उसी समय डिस्प्ले टेक्स्ट को भी बदलना चाहता हूं।

उदाहरण के लिए यहां मेरा कार्य है जो एक मूवी को वॉचलिस्ट में जोड़ता है।

  const addFavoriteMovie = (movie) => {
    const newFavoriteList = [...favorites, movie];
    setFavorites(newFavoriteList);
    saveToLocalStorage(newFavoriteList);
  };

और यह कैसे लौटाया जाता है:

<div className='row'>
        <MovieList
          movies={movies}
          handleFavoritesClick={addFavoriteMovie}
          favoriteComponent={AddFavorites}
        />
      </div>

यहाँ मेरा Add पसंदीदा घटक है।

import React from 'react';

const AddFavorite = () => {
  return(
    <React.Fragment>
    <div className="AddToList">
      <span className='mr-2'> Add to Watchlist</span>
      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="red" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
      </svg>
      </div>
    <div className="Added">
    <span className='mr-2'> Added to Watchlist</span>
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="red" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
    </svg>
    </div>
    </React.Fragment>
    );
};

export default AddFavorite;

मैं चाहता हूं कि AddToList div डिफ़ॉल्ट रूप से प्रदर्शित हो, और क्लिक पर मैं चाहता हूं कि यह जोड़ा गया div प्रदर्शित करे।

सभी फिल्में मेरी मूवीलिस्ट के माध्यम से प्रदर्शित होती हैं:

import React from 'react';

const MovieList = (props) => {
  const FavoriteComponent = props.favoriteComponent;

  return (
    <React.Fragment>
      {props.movies.map((movie, index) => (
        <div className='image-container d-flex justify-content-start m-3'>
          <img src={movie.Poster} alt='movie'></img>

          <div
            onClick={() => props.handleFavoritesClick(movie)}
            className='overlay d-flex align-items-center justify-content-center'>
            <FavoriteComponent />
          </div>
        </div>
      ))}
    </React.Fragment>
  );
};

export default MovieList;

क्या मुझे divs को स्वैप करने के लिए एक अलग हैंडलक्लिक फ़ंक्शन बनाने की आवश्यकता है? या क्या मैं डिव स्विच को शामिल करने के लिए अपने एडपसंदीदामूवी फ़ंक्शन को संपादित कर सकता हूं? या समाधान कुछ गोल चक्कर तरीका है जैसे कि अगर किसी फिल्म को पसंद किया गया है या नहीं, इस बारे में एक बयान देना?

0
SJK 25 नवम्बर 2020, 14:21

1 उत्तर

सबसे बढ़िया उत्तर

मान लें कि आपके पास 2 बाल घटक हैं जिन्हें आप सशर्त रूप से प्रस्तुत करना चाहते हैं, तो आप विभिन्न घटक को ट्रिगर करने के लिए निम्न तरीके का उपयोग कर सकते हैं।

const Component = () => {
   
    const [ active, setActive ] = useState(false)


    return (<div>
       <button onClick={() => setActive(!active)}> Toggle Me </button>
       { active ? <ChildComponent1 /> : <ChildComponent2 /> }
    </div>)    

}

जब आप बटन पर क्लिक करते हैं, तो यह "सक्रिय" स्थिति को सही/गलत टॉगल करेगा, और आप अलग-अलग घटकों को प्रदर्शित करते हैं कि यह सही/गलत है या नहीं।

1
Someone Special 25 नवम्बर 2020, 11:28