Exporting 2 different functions in React

Question

import React from 'react' function subValues() { let num1, num2, res; num1 = Number(document.sub.txtnum1.value) num2 = Number(document.sub.txtnum2.value) res = num1 - num2; document.sub.txtres.value=res } function Sub() { return ( <div> <form> First number:<input type="number" className="txtNum1"></input> Second number:<input type="number" className="txtNum2"></input> Result: <input className="textres"></input> <input type="button" value="Calculate" onClick="subValues()" ></input> </form> </div> ) } export { Sub, subValues }

I am trying to export both of these functions. I am learning how to use React Router right now and trying to create a very basic calculator with a Single Page Application. It does not like it when I try to put the subValues function inside of the Sub function. I have tried different ways to export that was shown in exporting multiple modules in react.js this thread, but it did not like it when I tried those ways at all. What is the correct way to get both of these to export and be usable with my App component? Thank you so much.

p.s. I do know that the code that I have written up right here will probably not work and is probably wildly wrong. I just typed all of this up and am trying to get to be able to test my code but can't until I can use both functions

I am just importing it on my App component right now, like import Sub from './Sub'. It doesn't let me export without using "export default" which then I can only export the one function. So I guess I need to put the subValues function inside the Sub function? — farmer1010
– farmer1010, Commented Jan 24, 2020 at 23:11
Don't mix JSX and vanilla DOM manipulation, you're just asking for trouble. — Emile Bergeron
– Emile Bergeron, Commented Jan 25, 2020 at 0:06
If the problem is not the onClick event, please provide a minimal reproducible example, so at least the part where you're trying to import the functions. — Emile Bergeron
– Emile Bergeron, Commented Jan 25, 2020 at 0:12

Matheus Frez · Accepted Answer · 2020-01-24 23:19:58Z

You export like this:

export const subValues = () => {} export const Sub= () => (<div> ... </div>);

And to import you can do this:

import { subValues , Sub } from './youClass.js';

Иван Довгаль · Accepted Answer · 2020-01-24 23:11:55Z

You can use:

A.js

export function myFunction() {}

B.js

import { myFunction } from './A'

Zohaib Ijaz · Accepted Answer · 2020-01-24 23:11:23Z

You can export on different lines and the import like this

// Sub.js import React from 'react' export function subValues() { // content } export function Sub() { // content } // and where you want to import this, App.js import { Sub, subValues } form './Sub';

Collectives™ on Stack Overflow

Exporting 2 different functions in React

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related