score:1
Accepted answer
For what you're trying to do you need to use a forwardRef so that the ref is passed to the functional component, I put an example snippet below. In class components a ref lets you access the class components methods, but when you do that with a react functional component that does not happen. Instead you just get back the ref and it's up to you to decide what will live in the ref. This is why in snippet below you need to add ref.current = { callme }
so that the callme
method will be available when called as functionref.current.callme()
.
const FunctionComponent = React.forwardRef((_props, ref) => {
const callme = () => {
console.log("function called!");
};
ref.current = { callme };
return <p>This is a function component</p>;
});
Here's a codesandbox of that
Source: stackoverflow.com
Related Query
- How can I call a Parent function from a React functional component?
- React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component
- How can i call a function on a React functional class?
- How can I test if a function is called onChange in a functional React component?
- How to call parent class function in child class in React JS
- How can we send/flash notitication/alert in a functional way in React ? Need to have a common function which can be used everywhere
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How can I convert a class with a constructor to a functional component using React Hooks?
- How can I add or remove class using querySelectorAll() in react functional component
- How to call a react hook fetch request in a functional component to access data then pass to a class component to map?
- React redux hook useDispatch function how can I call something after it finish
- How to test a handle function call with a react functional component with hooks
- How react can Identify it's a class component or functional component?
- How can I convert class component into functional component when adding React library to a Website?
- How can I call hook calls from react class bases components?
- ReactJS: How to get a functional parent component to call a function in a child class component
- How can call multiple function in React ternary if else condition
- How to call returned const from a react function in a class based component
- How can you change the class of clicked mapped item in a React functional component
- How can I change my React class to a function so that I can include Material UI classes?
- How to call a delete function with parameter(_id) outside the class in react js?
- How does React call the render function of an ES6 class in a such a way that `this` does not refer to the class itself?
- How to call service class method from functional component in react
- How do I convert this function into a class component so that I can use render to call the return?
- How can I use a function from another class in my React app?
- How can I write React component that returns a class component as a functional component?
- How can I call a function that set sets an outside variable inside a custom component in React Native?
- How can I convert the this cascading dropdown class component to functional one using React Hooks?
- How can we call a function before refreshing a page using react
- how to call function with async await in React function, so I can get the result by sequentially
More Query from same tag
- Scroll to the top of the page after render in react.js
- React JS 'propTypes' validators running twice
- Why won't my chart.js chart render in React?
- ReactJS Material-UI how to fix a component on top of an anchored menu
- ReactJs in static production: White page "Typeerror: Object(...) is not a function"
- I want to render the starting page based on user logged in or not on react
- React - onClick 'expected function, recieved object'
- react.js don't render until ajax request finish
- Gatsby - IntersectionObserver is not defined
- "ERROR db._checkNotDeleted is not a function" when trying to update my database
- React - How to Populate one Dropdowns based on selection from another Dropdown by Passing State as props
- React Redux dispatch syntax
- Firebase: how refresh idToken on http request if currentUser is null
- How to resolve ' error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.'?
- Mocha test failing for React component containing an image
- Object argument becomes nested after being passed to constructor in React
- CloudFlare JS challenge is breaking my SPA
- How do I convert CSS to Styled-Components with input[type="submit"] attribute?
- How can I reference a DOM element in a function that makes an action call?
- React js - calling a function in render works BUT in componentDidMount doesn't
- material-ui autocomplete attribute "value" not available when it is used with attribute "getOptionLabel"
- React, API keys and intermediary services
- Getting (X,Y) point on mouse click on chart
- Material UI - body scroll locked
- Warning: Failed prop type: The prop `todos[0].title` is marked as required in `TodoList`, but its value is `undefined`
- Why can my second window not access ipcRenderer in Electron
- Can I dynamically populate my SPFx web part's property field with all choices from a choice field
- PDF images blurry when download as PDF in production with pdfkit python
- export array as Component prop using React
- Yup don't trigger the error if value typing starts with 0