How to import function from another file into reactjs component?

Question

I have a main.js file

function convertToFahrenheit(param) { return param * 2 + 30; } function convertToCelsius(param) { return (param - 32) * 1.8; }

I have imported it into my component but it doesn't seem to work, I have also checked the path from devtool and this file completely exists

import React from "react"; import TemperatureInput from "./TemperatureInput.js"; import "../assets/js/main.js"; class Caculator extends React.Component { constructor(props) { super(props); this.state = { type: "c", temperature: 0, }; } handleCelsiusChange = (value) => { this.setState({ temperature: value, type: "c", }); }; handleFahrenheitChange = (value) => { this.setState({ temperature: value, type: "f", }); } render() { let valueCelsius = this.state.type === 'c' ? this.state.temperature : convertToCelsius(this.setState.temperature); return ( <div id="caculator"> <TemperatureInput type={this.state.type} changeInput = {this.handleCelsiusChange}/> <TemperatureInput type={this.state.type} changeInput = {this.handleFahrenheitChange} /> </div> ); } } export default Caculator;

what i get is

'convertToCelsius' is not defined no-undef

How can I use this function in my component?

mindlis · Accepted Answer · 2020-06-08 15:40:20Z

Try this

export function convertToFahrenheit(param) { return param * 2 + 30; } export function convertToCelsius(param) { return (param - 32) * 1.8; }

and then in your component

import { convertToCelsius } from "../assets/js/main.js";

Jason Andersen · Accepted Answer · 2020-06-08 15:46:16Z

You need to export the functions in main.js and then use the correct syntax to import them to the component. Try this:

export function convertToFahrenheit(param) { return param * 2 + 30; } export function convertToCelsius(param) { return (param - 32) * 1.8; }

Then for importing do the following

import React from "react"; import TemperatureInput from "./TemperatureInput.js"; import { convertToFahrenheit, convertToCelsius } from "../assets/js/main.js";

This site goes into more detail about it: https://www.geeksforgeeks.org/reactjs-importing-exporting/

Dmytro Biletskyi · Accepted Answer · 2020-06-08 15:41:16Z

Use export in main.js

export function convertToFahrenheit(param) { return param * 2 + 30; }

and named import

import {convertToFahrenheit} from "../assets/js/main.js";

ttt · Accepted Answer · 2020-06-09 01:10:17Z

There are multiple ways you can get function by using ES6 import and export syntax

In short, export allows you to export multiple expressions at a time while export default only allows one expression to be exported. Also, for those things exposed by export, brackets are needed when import while export default doesn't.

Option 1: export by named import

export function convertToFahrenheit(param) { return param * 2 + 30; } export function convertToCelsius(param) { return (param - 32) * 1.8; } //imported in your needed file import {convertToFahrenheit, convertToCelsius} from '../assets/js/main.js'

Option 2: another way using export by name import

function convertToFahrenheit(param) { return param * 2 + 30; } function convertToCelsius(param) { return (param - 32) * 1.8; } export {convertToFahrenheit, convertToCelsius} //imported in your needed file import {convertToFahrenheit, convertToCelsius} from '../assets/js/main.js'

Option 3: export default for one expression (function, class, object, array...)

//demo for exporting 1 function export default function convertToFahrenheit(param) { return param * 2 + 30; } //imported in your needed file, the name can be customised by you. import myOwnFunc from '../assets/js/main.js'

Collectives™ on Stack Overflow

How to import function from another file into reactjs component?

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related