Get object from another class in component react

Question

Good morning, I'm new to react, and I'm trying to figure things out. I found a spotify button which connect to the spotify API from your cliendID. It looks like this

import React from 'react';
import ReactDOM from 'react-dom';
import SpotifyLogin from 'react-spotify-login';
import { clientId, redirectUri } from './settings';

const onSuccess = response => console.log(response);
const onFailure = response => console.error(response);

ReactDOM.render(
  <SpotifyLogin clientId={clientId}
    redirectUri={redirectUri}
    onSuccess={onSuccess}
    onFailure={onFailure}/>,
  document.getElementById('example')
);

The data I want to get is the response from it because it has the access_token. Being new to react, I thought I could make a class with a getter in it.

import React, { Component, setState, useState } from 'react';
import SpotifyLogin from 'react-spotify-login';
import { Link } from 'react-router-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            onSuccess : {}
        }
    }

    getData() {
        return this.onSuccess;
    }

    render(){
        return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={this.onSuccess}/>
                </Link>
            </div>
        )
    }
}

export default App

but in my other component, when I try to do a

var toto = new App
console.log(toto.getData);

it's all empty. Moreover, I would like to know if there's a way which will allow me to avoid the declaration of a new object inside my component each time I will need to access my data. For example, I will pass props to my classes, so if I call this component in the file where I declared an instance of App it will be ok, but what if I use this component in another file and there's no instance of App, how could I have access to this data. Is there a way to global it ?

Charles · Accepted Answer · 2020-10-29 18:47:08Z

It seems to me that your class component is going to have this.onSuccess return empty as it is never being set. Since you have changed this.onSuccess to a state variable, you need to set that state at some point. Currently, your onSuccess function in your render will not work because it is not a function at all.

So instead you would need to change the response state before getData is going to work, for example:

import React, { Component, setState, useState } from 'react';
import SpotifyLogin from 'react-spotify-login';
import { Link } from 'react-router-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            responseObject : {}
        }
    }

    onSuccess(response) {
        this.setState({ responseObject: response}) 
    }

    getData() {
        return this.responseObject;
    }

    render(){
        return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={this.onSuccess}/>
                </Link>
            </div>
        )
    }
}

export default App

Although, as to your second question, it would make more sense to define this onSuccess function in a higher class, and pass that function down through props like you suggested, so that you do not have to use the getData function at all. So instead you could just do:

class SpotifyContainer extends Component {
    render(){
        return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={this.props.onSuccess}/>
                </Link>
            </div>
        )
    }
}

and therefore you can just pass onSuccess down as a function with props.

Personally I would recommend using React Hooks / Functional components as well, as I find they can be somewhat easier to understand than class components, especially if you are not going to be using state. So you could instead just write:

function SpotifyContainer(props) {
    return (
            <div>
                <Link to="/home">
                    <SpotifyLogin buttonText="Login" clientId='myinfo'
                    redirectUri='http://localhost:3000/home'
                    onSuccess={props.onSuccess}/>
                </Link>
            </div>
        )
}

export default SpotifyContainer;

Collectives™ on Stack Overflow

Get object from another class in component react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related