React TS variable is undefined-CodePudding

New to ReactTS here. Can somebody explain to me why the variable content is undefined and how to set it so I can pass its value to <App />?

It is showing undefined in both the index.tsx file and the subsequent App.tsx file.

index.tsx

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Declare type for drupalSettings.
declare global {
    interface Window {
        drupalSettings: {
            mydashboard: Settings;
        };
    }
}

// Declare types for the React component.
interface Elements {
    content: string[];
}

interface Settings {
    [index: string]: Elements;
}

// Get Drupal settings.
console.log('window.drupalSettings', window.drupalSettings.mydashboard) <!--- shows correct value --->

const drupalAndReactApp: Settings = window.drupalSettings.mydashboard || '';
console.log('drupalAndReactApp', drupalAndReactApp, drupalAndReactApp['test']);<!--- shows correct value --->


const { content } = drupalAndReactApp['test'];
console.log('content', content) <!--- shows undefined --->


ReactDOM.render(<App content={content} />, document.getElementById('my-app-target'));

index.tsx

    let accessToken = "";
    let embedUrl = "";
    let reportContainer: HTMLElement;
    let reportRef: React.Ref<HTMLDivElement>;
    let loading: JSX.Element;

    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface AppProps { content: string[] };
    interface AppState { accessToken: string; embedUrl: string; error: string[]};

    class App extends React.Component<AppProps, AppState> {
    
        constructor(props: AppProps) {
            super(props);
            const { content } = props;
            this.state = { accessToken: "", embedUrl: "", error: [] };

            reportRef = React.createRef();
            console.log('props', props, content)  <!--- shows undefined --->
            // Report container
            loading = (<>
                <div id="welcome">
                    Welcome
                </div>
                <div
                   id="reportContainer"
                    ref={reportRef} >
                    Loading the report...
                </div>
            </>
        );
    }
    ...

Edit

Output of the console logs...

window.drupalSettings Object { test: "[\"authenticated\",\"administrator\"]" }

drupalAndReactApp Object { test: "[\"authenticated\",\"administrator\"]" } ["authenticated","administrator"]

content undefined

props Object { content: undefined } undefined

Edit 2

window.drupalSettings Object { content: "[\"authenticated\",\"administrator\"]" }

drupalAndReactApp Object { content: "[\"authenticated\",\"administrator\"]" } ["authenticated","administrator"]

content undefined

props Object { content: undefined } undefined

CodePudding user response：

Based on your data, your TypeScript definitions should look like this:

interface Settings {
    [index: string]: string;
}

And later parse the JSON:

const content: string[] = JSON.parse(drupalAndReactApp.content);