How to send data from one component/div to another using onclick in React

Gavin Walsh 0
Viewed 32

I'm currently working on a movie app and trying to add an onclick function that sends the movie data from the movie card to the hero section.

I'm new to react so I'm not quiet sure how to approach this problem and cant find any good information on it.

So far I have created the carousel component that receives the movie data as a prop from my App.js. I then have a hero section also within the Carousel component and want to display the data within this div.

This is what I have:

function TestCarousel({items}) {


    //state 
    const [Title, setTitle] = useState([items.original_title])

    // function
    function movieTitle(e) {
        console.log('click');
        
    }


    
 // Use Effect 
 useEffect(() => { 
    movieTitle();
  
  }, [])
  

    return (
        
        
       <div className="main-container">

            <div className="hero">

                <img src={Image} className="hero-img" />

                <div className="movie-details">
                    <h1>Title</h1>
                    <p>Movie Description</p> 
                </div>

            </div>


                <div className="cards">
                    {items.map((image, index) => (

                <div className="movie-card">

                    <img src={'https://image.tmdb.org/t/p/w500' + image.poster_path} className='movie-img' onClick={movieTitle}/>
                    {/* <h5 className='movie-card-desc'>{image.original_title}</h5> */}
                    {/* <p className='movie-card-overview'>{movie.overview}</p> */}
        
                </div>

                        ))}
           </div>

        </div> 
        
    );
}

Here is how it looks :

enter image description here

react-hooks reactjs javascript
2 Answers

You can set complete item in state and update the item data by onclick like -

function TestCarousel({items}) {


    //state 

    const [currentItem, setCurrentItem] = useState(items.at(0));
  

    return (
        
        
       <div className="main-container">

            <div className="hero">

                <img src={currentItem.image} className="hero-img" />

                <div className="movie-details">
                    <h1>{currentItem.original_title}</h1>
                    <p>{currentItem.overview}</p> 
                </div>

            </div>


                <div className="cards">
                    {items.map((item, index) => (

                <div className="movie-card">

                    <img src={'https://image.tmdb.org/t/p/w500' + item.poster_path} className='movie-img' onClick={()=>{setCurrentItem(item)}}/>
                    <h5 className='movie-card-desc'>{item.original_title}</h5>
                    <p className='movie-card-overview'>{item.overview}</p>
        
                </div>

                        ))}
           </div>

        </div> 
        
    );
}
Ajeet Kumar0

u can remove the useEffect first, then card section

<img src={'https://image.tmdb.org/t/p/w500' + image.poster_path} className='movie-img' onClick={() => movieTitle(image.original_title)}/>

Also on function movieTitle

function movieTitle(val) {
        setTitle(val);  
    }

Also if u want to send image and the title u should create new state,

something like this;

const [movie, setMovie] = useState(null);

Then in card section

<img src={'https://image.tmdb.org/t/p/w500' + image.poster_path} className='movie-img' onClick={() => {
movieTitle(image.original_title);
setMovie(image)}/>

then use it, like <h1>{movie.original_title}</h1>

TimoDevs0
Related