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

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;

CodePudding user response：

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

CodePudding user response：

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;