How to add function in JSX?

by

1) You’re missing a closing bracket on the ReactDOM line:

ReactDOM.render(<Main />, document.getElementById('root'));

2) You need to call the function for it to work

vanilla_JS()

In this working example instead of logging to the console I’m returning a string:

function Main() {

  const vanilla_JS = function() { return 'testing'; }

   return (
    <main>
      <div>{vanilla_JS()}</div>
    </main>
   );

}

ReactDOM.render(<Main />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

More Related Contents:

  1. Loop inside React JSX
  2. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  3. Why shouldn’t JSX props use arrow functions or bind?
  4. Render HTML string as real HTML in a React component
  5. React – User-Defined JSX Components Not rendering
  6. Applying className/onClick/onChange not working on Custom React Component
  7. How to use componentWillMount() in React Hooks?
  8. ReactJS – .JS vs .JSX
  9. Can I add a key prop to a React fragment?
  10. How to render HTML string as real HTML?
  11. React.js: Identifying different inputs with one onChange handler
  12. ESLint with React gives `no-unused-vars` errors
  13. Passing props into external stylesheet in React Native?
  14. What do curly braces mean in JSX (React)?
  15. How to Call a Function inside a Render in React/Jsx
  16. How to have nested loops with map in JSX?
  17. Using styled-components with props and TypeScript
  18. if-else statement inside jsx: ReactJS
  19. React Native – Image Require Module using Dynamic Names
  20. Correct path for img on React.js
  21. How do I set multipart in axios with react?
  22. Why use Redux over Facebook Flux? [closed]
  23. How to print React component on click of a button?
  24. How to render Streamable image on React coming from FastAPI server?
  25. react-router-dom v6 Routes showing blank page
  26. react-router (v4) how to go back?
  27. how to set up an inline svg with webpack
  28. How can I dispatch function in redux?
  29. TypeError dispatcher.useState is not a function when using React Hooks
  30. How to Access styles from React?

Leave a Comment