I don't know what's wrong with 'render'

Question

I have this error error message : Cannot find name 'render'.ts(2304) Then I did googling but couldn't find anything about render. I don't know what's wrong with 'render'.

import React from "react";
import HoverButtons from "./HoverButtons";

const evStop = (ev:any) => {
  ev.preventDefault(); 
  ev.stopPropagation(); 
  ev.nativeEvent.stopImmediatePropagation(); 
};

function HoverMenus () {
  const state = { hiddenPopupMenu: true };
  const toggle = () => {
    this.setState({ hiddenPopupMenu: !this.state.hiddenPopupMenu });
  };
  const clkBtn = (ev:any, msg:any) => {
    evStop(ev);
    this.props.flashFn(msg);
  };

  // ***error message : Cannot find name 'render'.ts(2304)***
  render() {
    const p = {
      funcs: {
        interested: (e:any) => this.clkBtn(e, "interested"),
      }
    };
    return (
      <div className="whenhovered" onClick={this.toggle}>
        {this.state.hiddenPopupMenu && (
          <div>
            <div className="mt-5 pt-5" />
            <div className="mt-5" />            
            <HoverButtons
              txt="LIKE"
              icon="thumbs-up"
              clicked={p.funcs.interested}
            />
          </div>
        )}
      </div>
    );
  }
}

export default HoverMenus;

You cant do that. `this.setState` and `render` belong in class component. `HoverMenus` is clearly a function component/ Please check https://reactjs.org/docs/components-and-props.html#function-and-class-components — Suraj Rao, Dec 29 '22 at 13:44
I think you're intending your `render() {...}` to be a method in a class component - but as this isn't a class (it's a function component) the JS engine thinks you're trying to *call* a function called `render`. Since no such function exists in scope, that's why you get that error message. — Robin Zigmond, Dec 29 '22 at 13:45

score 1 · Answer 1 · answered Dec 29 '22 at 13:45

1

You mixed between a class component and a function component, To use class component convert your function to a class and add extends React.Component to your class:

class HoverMenus extends React.Component {
}

To use function component, you will need to change the syntax acording to https://reactjs.org/docs/components-and-props.html

answered Dec 29 '22 at 13:45

Itay Elkouby

344
1
15

1

I want to use a function component but thanks for your advice – EyeMassager Dec 30 '22 at 06:26

score 0 · Accepted Answer · answered Dec 29 '22 at 13:50

The 'render' is a class component method. It does not work in functional components.

Try this:

import {useState} from 'react'

function HoverMenus (props) {
  const [hiddenPopupMenu, setHiddenPopupMenu] = useState(true)

  const toggle = () => {
    setHiddenPopupMenu(!hiddenPopupMenu);
  };
  
  const clkBtn = (ev:any, msg:any) => {
    ev.stopPropagation();
    props.flashFn(msg);
  };

  const p = (e:any) => clkBtn(e, "interested");
  
  return (
    <div className="whenhovered" onClick={toggle}>
      {hiddenPopupMenu && (
        <div>
          <div className="mt-5 pt-5" />
          <div className="mt-5" />
          <HoverButtons
            txt="LIKE"
            icon="thumbs-up"
            clicked={p}
          />
        </div>
      )}
    </div>
  );
}

export default HoverMenus;

I don't know what's wrong with 'render'

2 Answers2