React - Unable to pass token to Content Explorer

I seem to be running into an issue implementing Content Explorer in React. I have the api call occurring in componentDidMount() and it is successfully generating a token. I am then able to render the token on screen as an h1 (for testing purposes). I am also able to console.log the token but when I attempt to pass the token into the 'token' parameter in ContentExplorer it does not seem to work. I have also tried making ContentExplorer as a component separate from my api call. I am able to successfully pass the token into this separate component and render it as an h1 but it still will not work correctly when passed into ContentExplorer as a parameter. Here is my code below. In this code I am doing my api call and ContentExplorer in the same component. Any help as to why the token will not function properly would be greatly appreciated. Thanks.

class Box extends Component {    
constructor(props) {
        super(props);
        this.state = {
            accessToken: ''
        }
    }    

      async componentDidMount() {
        const authenticationUrl = "https://api.box.com/oauth2/token";
        let search = window.location.search;
        let params = new URLSearchParams(search);
        let accessToken = await axios.post(
            authenticationUrl,
            queryString.stringify({
                grant_type: 'authorization_code',
                code: params.get('code'),
                client_id: 'XXXXXXXXXXXXXXXXXXXXXX',
                client_secret: 'XXXXXXXXXXXXXXXXXXXX'
            })
        )
            .then(response => response.data.access_token);
        this.setState({accessToken: accessToken});
        console.log(accessToken);
    }    render() {
        let token = this.state.accessToken;
        return(
            

                
                                            contentPreviewProps={{
                            contentSidebarProps: {
                                detailsSidebarProps: {
                                    hasProperties: true,
                                    hasNotices: true,
                                    hasAccessStats: true,
                                    hasClassification: true,
                                    hasRetentionPolicy: true,
                                },
                                // features: FEATURES,
                                hasActivityFeed: true,
                                hasMetadata: true,
                                hasSkills: true,
                                hasVersions: true,
                            },
                        }}
                        // features={FEATURES}
                        rootFolderId="XXXXXXXX"
                        token={token}
                    />
                
                {token}

            

        )
    }
}
export default Box;

dhebert-dev

July 01, 2020 07:43

Checking to see if anyone has a solution for this issue as it is blocking our progress with getting Box implemented with our app.

ConradChan

July 01, 2020 10:21

Hi ,

It seems like the root of the issue is that ContentExplorer does not handle a string access token being changed after mounting.

You probably have two options:

Render ContentExplorer conditionally based on when your have resolved your token
Use a token generator function instead -- I couldn't find a good example in box-ui-elements, but here is some documentation from box-content-preview: https://github.com/box/box-content-preview#token-generator-function

Hope that helps,

Conrad

July 15, 2020 13:05

Thank you! So the solution here was to conditionally render Content Explorer. That helped me a lot. Thanks so much.

{token}

Comments