CODEWITHSUNDEEP
reactjsreact-propsreact-component
Ali Raza
Ali Raza

Reputation: 152

why is function not being passed as props to onClick of another component

I am new to React JS and stuck at an issue. I am trying to pass openPopup, it returns the error that openPopup is not a function. I have done everything like destructuring openPopup in MovieCard.JS but to no avail. I want to pass imbdID of the clicked card. Can someone help? Thank you. `

class Status extends Component {
    state = {
        isLoading: true,
        movies: null,
        search: '',
    }

    openPopup = id => {
        console.log(id)
    }

    render() {
        const { isLoading, movies } = this.state;
        console.log(this.state);
    return (
        <div className='homapage'>
        <h1>Find your favourite movies on IMDB</h1>
        <div className='movies-result-cards'>
        {!isLoading ? (
            movies.map(movie=> <MovieCard key={movie.imdbID} {...movie} openPopup={this.openPopup} />)
        ): (movies === null && isLoading ? <h3> </h3> : <h3>...Loading </h3>)}
        </div>
        </div>
    )}

}
`

import React from 'react';
import './MovieCard.css'

const MovieCard = (props, openPopup) => {
    const { Title, Poster, Type, Year, imdbID} = props;
    return (
    <div className='card'>
        <button onClick={() => openPopup(imdbID)}>View Order</button>
            <h1>{Title.length > 20 ? Title.substring(0, 20) + '...' :
             Title}</h1>
            <img src={Poster} alt={Title}/>
            <p>{Type}</p>
            <p>{Year}</p>
    </div>
    )
}

export default MovieCard;

    TypeError: openPopup is not a function
onClick
F:/practice/classified website/classified-site/src/Components/MovieCard.js:8
   5 | const { Title, Poster, Type, Year, imdbID} = props;
   6 | return (
   7 | <div className='card'>
>  8 |     <button onClick={() => openPopup(imdbID)}>View Order</button>
     | ^   9 |         <h1>{Title.length > 20 ? Title.substring(0, 20) + '...' :
  10 |          Title}</h1>
  11 |         <img src={Poster} alt={Title}/>

Upvotes: 0

Views: 131

Answers (1)

Rohan Agarwal
Rohan Agarwal

Reputation: 2609

You need to use props.openPopup()

import React from 'react';
import './MovieCard.css'

const MovieCard = (props) => {
    const { Title, Poster, Type, Year, imdbID} = props;
    return (
    <div className='card'>
        <button onClick={() => props.openPopup(imdbID)}>View Order</button>
            <h1>{Title.length > 20 ? Title.substring(0, 20) + '...' :
             Title}</h1>
            <img src={Poster} alt={Title}/>
            <p>{Type}</p>
            <p>{Year}</p>
    </div>
    )
}

export default MovieCard;

If you are trying to use the destructuring way, then what you have done is wrong. Try this:

import React from 'react';
import './MovieCard.css'

const MovieCard = ({openPopup,...rest}) => {
    const { Title, Poster, Type, Year, imdbID} = rest;
    return (
    <div className='card'>
        <button onClick={() => openPopup(imdbID)}>View Order</button>
            <h1>{Title.length > 20 ? Title.substring(0, 20) + '...' :
             Title}</h1>
            <img src={Poster} alt={Title}/>
            <p>{Type}</p>
            <p>{Year}</p>
    </div>
    )
}

export default MovieCard;

Upvotes: 1

Related Questions