Use const from another file in Reactjs

Question

I have an object:

import React, {Component} from 'react';
import ProgressBar from "./ProgressBar";

class Languages extends Component {
    state = {
        languages: [
            {id: 1, value: "XXX", xp: 1.5},
            {id: 2, value: "CCC", xp: 1},
            {id: 3, value: "AAA", xp: 2}
        ]
    }

    render() {
        let {languages} = this.state;
        const levels = ['Test', 'Bad', 'Sorry']

        return (
            <div className="languages">
                <ProgressBar
                    programming={languages}
                    className="languagesDisplay"
                    levels={levels}
                    title="Languages"
                />
            </div>
        );
    }
}

export default Languages;

import React from 'react';

const ProgressBar = (props) => {
    return (
        <div className={props.className}>
            <h3>{props.title}</h3>
            <div className="years">
                <span>Experiences</span>
                props.levels.map((level) => {
                    <span>level</span>
                })
            </div>

<span>level</span> return props.levels.map((level) =>level)

how can i display the const ['Test', 'Bad', 'Sorry'] from Languages.js in a <span> in a different React file?

Answer 1

You need to export that certain constant from your file like that:

import React, {
    Component
} from 'react';
import ProgressBar from "./ProgressBar";

export const levels = ['Test', 'Bad', 'Sorry']

class Languages extends Component {
    state = {
        languages: [{
                id: 1,
                value: "XXX",
                xp: 1.5
            },
            {
                id: 2,
                value: "CCC",
                xp: 1
            },
            {
                id: 3,
                value: "AAA",
                xp: 2
            }
        ]
    }

    render() {
        let {
            languages
        } = this.state;

        return (
            <div className="languages">
                <ProgressBar
                    programming={languages}
                    className="languagesDisplay"
                    levels={levels}
                    title="Languages"
                />
            </div>
        );
    }
}

export default Languages;

After it, you need to import it in the file where you want to access it:

import {levels} from '/path/to/file';