How to have javascript inside of react.js

Question

I am building a React.JS website and I am not entirely sure how to implement a section of JavaScript inside of my html. In normal HTML you would put the script inside of these tags:

<Script></Script>

But with react.js

function App() {
  return (
    <div>
        <button onlick='log()'>Log</button>
        <script>
            Log() = Console.log('Hello')
        </Script>
    </div>
  );
}

export default App;

Something like this will not work. How am i able to run a script this way?

Answer 1

Please learn how React works and how events work specifically

A basic example:

function App() {
  const log = () => console.log('Hello')

  return <button onClick={log}>Log</button>
}

export default App;

Answer 2

try this

 function App() {
const log =()=> {console.log('Hello')}
  return (
    <div>
        <button onClick={()=>log()}>Log</button>
     
    </div>
  );
}

export default App;

more information: https://reactjs.org/docs/handling-events.html

Answer 3

ReactJs Docs will be your friend here but basically you can run your javascript code inside your function component before your return statement

Here is a codesandbox link example

Answer 4

no need to use script tag you can put all the functions you want inside the App function and before return please specify what you need to do exactly so i can help

Answer 5

This is a better approach, but there's a lot you have to learn about React from your code in your question, beyond what I think I can explain in this answer. Your code has a number of typos and you probably do not actually need to use a <script> tag.

const logger = () => {
  console.log('hello')
}

function App() {
    return (
      <div>
          <button onClick={logger}>Log</button>
      </div>
    );
}

export default App;