Using the returned value of an ordinary function insdie a ReactJS component

Question

I have an ordinary JavaScript function like this:

// frontend/src/static/js/components/daw/index.js

export default function Daw() {
  return (
    <>
        <div>Hello world.</div>
    </>
  );
}

I'm trying to use the above function inside the below ReactJS component:

// frontend/src/static/js/pages/_VideoMediaPage.js

import React from 'react';
import Daw from '../components/daw';

export class Page extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <div>{Daw()}</div>
      </>
    );
  }
}

But I'm getting this error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app

Question

What's the proper way to use the ordinary function inside the ReactJS component?

You've left something out in your code. Where's the hook that this error message is talking about? — Thomas
– Thomas, Commented Feb 28, 2022 at 16:41
@Thomas The hook error got resolved by @yousoumar answer :) — Megidd
– Megidd, Commented Feb 28, 2022 at 18:36

Youssouf Oumar · Accepted Answer · 2022-02-28 15:41:56Z

2

Your function is technically a React Functional Component. You should be calling it like one.

import React from 'react';
import Daw from '../components/daw';

export class Page extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <div><Daw/></div>
      </>
    );
  }
}

answered Feb 28, 2022 at 15:41

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

Collectives™ on Stack Overflow

Using the returned value of an ordinary function insdie a ReactJS component

Question

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related