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;

Answer 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

Answer 2

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;