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

Edit after seeing your response above: If the issue is just that the above code isn't working, here are a couple of things to check.

Inside of ProgressBar you've got a couple of errors in your JSX. First, you need curly braces around your JavaScript interpolation and secondly, you're not returning anything in your.map() function. If you were using parentheses it would be an implicit return, but with the curly braces you need a return statement. Try this instead:

 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) => { return (<span>{level}</span>) }) } </div> )};

My initial answer, which still may be helpful for understanding what's going on:

It's not entirely clear what you want to do, but here are a couple of things that might be helpful.

What's happening in your code above is that the levels variable, which is an array of strings, is being passed down from the parent component Languages into the child component ProgressBar via the props object.

When ProgressBar is called inside of Languages , it's properties (or props) are set ( programming , className , levels , title ).
The levels={levels} part means that the prop levels on ProgressBar is being set to the variable levels (the array of strings).

Inside of ProgressBar all of those properties are accessible in the props object that's passed as an argument. That's why you're able to access that array of strings with props.levels.map() which will map the array of strings however you tell it to (in this case by printing each individual item within a <span> tag).

So, with that understanding of what's happening here, here are a couple of things you could do to access the levels variable elsewhere in another file.

If levels is a constant that you want to access in multiple places, you could move it outside of the body of your Languages component and export it to use it in other places.

That could look like:

 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;

By exporting it from the top level, you could import it in another file exactly as it is.

 import { levels } from '/insert-first-file-location-here'

Another option is to pass the levels variable into another component as a prop. This way if levels gets changed at the top level, those changes will drill down into subsequent components.

 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> <AnotherComponentThatUsesLevels levels={levels} /> </> ); } } export default Languages;

And then

 import React from 'react' export const AnotherComponentThatUsesLevels (props) => { return ( <> {/* do something with levels here, maybe map them like before*/} {props.levels.map((level) => (<span>{level}</span>)} </> ) }

Does that help understand what's happening in the example and give you a couple of ways you could use that variable in another location?

Answer 2

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';