CODEWITHSUNDEEP
javascriptreactjs
Mr.Banks
Mr.Banks

Reputation: 437

How to invoke a prop directly?

I am tryng to invoke a props function directly this.props.setAuth(); , but it doesnt seem to work :/

TypeError: Cannot read property 'props' of undefined

How do you go about invoking a parents function in a child component directly?

I want to change the parents state without any event handlers e.g onClick={this.props.setAuth}. I want to do it in a async function so yeah.

Any alternatives would be helpful. Thanks :c

edit: extra code:

class LoginPage extends Component {
  constructor(props){
   super(props)
   this.state = {auth: false}
   this.setAuth = this.setAuth.bind(this)
  }

  setAuth() {
    this.setState({auth: true})
  }
 <App setAuth={this.setAuth}/>

below is the App component, this is part of the code that I want to call the props function

 onSignIn(googleUser) {

(useless code) - onSignIn is inside the App component

        axios.post('http://localhost:3000/auth', {
         userId: id,
         name: name,
         email: email
        })
        .then(function (response) {
        this.props.setAuth();

        })
        .catch(function (error) {
          console.log(error);
        });


         }.bind(this));

Upvotes: 2

Views: 125

Answers (1)

Igor Phelype Guimar&#227;es
Igor Phelype Guimar&#227;es

Reputation: 546

Here, some example:

My index file has this component and this function: The component will receive as props a callback function.

<ArtistsSearchList 
    onArtistSelect={
        current_artist =>this.setArtist(current_artist)
    }
    key={this.state.term}
    access_token=access_token}
    term={this.state.term} />

setArtist(current_artist){
        this.setState({
            current_artist,
            artist_image_url: current_artist.images[0].url
        });
        var spotifyApi = new SpotifyWebApi();
        spotifyApi.setAccessToken(access_token);
        spotifyApi.getArtistAlbums(current_artist.id, {album_type: 'album', limit: 10, market: 'BR'}, (err, data) => {
        if(err){
            console.log(err);
            // window.location.replace(api_url);
        }
        console.log(access_token);
        console.log("Data: ", data);
        console.log("State current artist: ", this.state.current_artist);
        this.setState({
            albums: data.items,
            selected_album_id: data.items[0].id
        });
    });
}

On the ArtistsSearchList component file i have this: I will pass again as props the method for the component ArtistsSearchListItem

 <ArtistsSearchListItem
                key={artist.id}
                current_artist={artist}
                onArtistSelect={this.props.onArtistSelect}
                artist_image_url={artist.images[0].url} />

On the ArtistsSearchListItem file, i will finnaly make the call of the methods passed as props through all this way:

const ArtistSearchListItem = (props) => {
    const artist_name = props.current_artist.name;
    const artist_image_url = props.artist_image_url;
    return(
        <li onClick={() => props.onArtistSelect(props.current_artist)} className="artist-search-list-item">
            <h3>{artist_name}</h3>
            <img alt="Foto do artista" className="img-responsive img-thumbnail" src={artist_image_url}/>
        </li>
    );
}

My repo: https://github.com/igorPhelype/Spotigorfy

The webapp working: https://igorphelype.github.io/Spotigorfy/

Upvotes: 1

Related Questions