Export React.JS variable and use in other file

Question

So what I want to do is take the input from the radio buttons (metric or imperial) from Forecast.js, use them in a function in Conditions.js to determine whether it's hot or cold. I've exported the variable unit from Forecast.js but when I try to use it in the clothes() function it doesn't work. I've tried everything I found online and I tried to understand but I'm new to Reactjs.

Conditions.js https://pastebin.com/RHbLuqZD

import { unit } from '../Forecast/Forecast.js';

function clothes(t) {
    if (unit === "metric") {
        if (Number('t') <= 20)
            return (<>
                <img src={Cold} alt="wind icon" style={{ width: 50, marginRight: 20, height: 50 }} />
            It's cold, dress accordingly!
            </>);
        else
            return (<>
                <img src={Hot} alt="wind icon" style={{ width: 50, marginRight: 20, height: 50 }} />
            It's Warm, dress accordingly!
            </>);
    }

    if (unit === "imperial") {
        if (Number('t') <= 70)
            return (<>
                <img src={Cold} alt="wind icon" style={{ width: 50, marginRight: 20, height: 50 }} />
            It's cold, dress accordingly!
            </>);
        else
            return (<>
                <img src={Hot} alt="wind icon" style={{ width: 50, marginRight: 20, height: 50 }} />
            It's Warm, dress accordingly!
            </>);
    }
}

Forecast.js https://pastebin.com/wcBu8bwA

export default Forecast;
export let unit = this.state.unit;

The reason it doesn't work could be because I didn't do the import and export properly or because I didn't use the imported variable properly.

Edit: As I specified I'm a beginner, I don't know a lot, what I want is to see how to solve the problem and then understand how to do it. I just need to understand the problem with my code, or an alternative.

do you know what this exactly is? because it's a global variable inside of a javascript file it is the window object this when used outside of a method refer to the window object and that window object doesn't have any state property in it. — Ayush
– Ayush, Commented May 18, 2021 at 9:43
It will never work... You don't have access to the state outside of Forecast function — mindmaster
– mindmaster, Commented May 18, 2021 at 9:44
Ok so how am I supposed to do it? I tried everything online and couldn't make it work. — Alexandru Constantin Arvinte
– Alexandru Constantin Arvinte, Commented May 18, 2021 at 9:53
This Number('t') is not going to work, it will convert a string "t" to number. Number(t) should be the correct. I would, if I were you, try some better name for this variable, though. Also, you don't need the else there, as you are returning after the if. — Marcos Sandrini
– Marcos Sandrini, Commented May 18, 2021 at 10:25

Ccc · Accepted Answer · 2021-05-18 09:54:44Z

1

if('clothes' and 'Forecast' is a parent-child realationship)

the 'unit' state, can be deliver by 'props'

function Parent(props){
const [unit,setUnit] = useState("")
return(
 <Child unit={unit}>
)
}
   
function Child(props){
  console.log(props.unit)
return(
<div/>
)
}

else. you can learn about 'react-redux'

answered May 18, 2021 at 9:54

Ccc

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

devnull69 Over a year ago

... or useContext

Marcos Sandrini · Accepted Answer · 2021-05-18 10:37:21Z

1

This is not how the whole thing works. One state variable like unit in one component is not exportable like that.

There are mainly two things you can do:

one is pass this unit value to the Conditions.js as a prop and then pass it on to the clothes function (when using it, just like you pass the temperature value) to work with it;
another one is to have a state management tool like Redux, reactN or even use the React's built-in context. If you have need to use one of those only once it may not compensate the extra boilerplate, but it may be worth learning about them at least.

answered May 18, 2021 at 10:37

Marcos Sandrini

4503 silver badges10 bronze badges

Collectives™ on Stack Overflow

Export React.JS variable and use in other file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related