Breaking News: Grepper is joining You.com. Read the official announcement!

How To Access A Child Component's Function

Javasper answered on October 10, 2022 Popularity 4/10 Helpfulness 2/10

answer How To Access A Child Component's Function

How To Access A Child Component's Function

Comment

import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

const App = () => {
  const childRef = useRef()
  return (
    <View style={{flex: 1, alignItems: "center", justifyContent:"center"}}>
      <ChildComponent ref={childRef} />
      <TouchableOpacity
        onPress={() => {
          childRef.current.sayHi()
        }}> 
        <Text> Execute Child Method</Text>
        </TouchableOpacity>

    </View>
  )
}

export default App;

const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // methods connected to `ref`
    sayHi: () => { sayHi() }
  }))
  // internal method
  const sayHi = () => {
    console.log("Hello")
  }
  return (
    <View />
  )
})

Popularity 4/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: whatever

Link to this answer
Share Copy Link

Contributed on Oct 10 2022

Javasper

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

How To Access A Child Component's Function

Contents

More Related Answers

How To Access A Child Component's Function

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.