how to import function in reactjs

Question

AppFunction.js

export default function myFunction() {
  var str1 = "Hello ";
  var str2 = "world!";
  var res = str1.concat(str2);
  document.getElementById("demo").innerHTML = res;
}

App.js

import React, { Component } from 'react';
import myFunction  from './AppFunction';

class App extends Component {           
  render() {
    return (
      <div className="App">
        <button onclick="myFunction()">Try it</button>
        <p id="demo"></p>
      </div>
    );
  }
}

export default App;

I should to import an existing JavaScript library and then call it's functions.

componentDidMount() {
  myFunction()
}

When I write like this, working. But shows on screen without clicking the onclick button. I want to press the button and show it on the screen.

dotconnor · Accepted Answer · 2018-11-09 09:02:19Z

6

Change

<button onclick="myFunction()">Try it</button>

to

<button onClick={myFunction}>Try it</button>

answered Nov 9, 2018 at 9:02

dotconnor

1,78611 silver badges23 bronze badges

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

Comments

Hai Tien · Accepted Answer · 2018-11-09 09:21:35Z

0

You should use

export default function myFunction() {
  var str1 = "Hello ";
  var str2 = "world!";
  var res = str1.concat(str2);
  return res;
}

and

<button onClick={myFunction}>Try it</button>

answered Nov 9, 2018 at 9:21

Hai Tien

3,1278 gold badges40 silver badges65 bronze badges

Collectives™ on Stack Overflow

how to import function in reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related