title: Accessing Refs in React Functional Component
body: <p>Im using <a href="https://www.npmjs.com/package/react-native-input-credit-card" rel="nofollow noreferrer">this</a> package to add credit cards to my app, how would you åccess the refs as in the example when using this in a functional component?</p>
  
  <p>This is how they show to update values:</p>
  
  <pre><code>this.refs.CCInput.setValues({ number: "4242" });
  </code></pre>
  
  <p>I don't know how to access that inside a functional component?</p>
  
  <p>This is my component to Edit a card, and I want to add the current values to the inputs.</p>
  
  <pre><code>import React, {useContext, useState, useRef} from 'react';
  import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';
  import {CreditCardInput} from 'react-native-input-credit-card';
  
  import Store from '../../store/context';
  
  const styles = StyleSheet.create({
  
  });
  
  export default function EditCard(props) {
    const {navigate} = props.navigation;
    const {cardNumber} = props.navigation.state.params;
    const {state, dispatch} = useContext(Store);
    const [card, setCard] = useState(
      state.cards.find(card =&gt; {
        return card.values.number === cardNumber;
      }),
    );
    const _onChange = form =&gt; {
      if (form.valid) {
        setCard(form);
      }
    };
    const updateCard = () =&gt; {
      dispatch({
        type: 'ADD_CARD',
        payload: card,
      });
      navigate.goBack();
    };
    return (
      &lt;View style={styles.container}&gt;
        &lt;CreditCardInput
          validColor={'#47B278'}
          invalidColor={'#E23C3C'}
          placeholderColor={'#efefef'}
          onChange={_onChange}
          requiresName
        /&gt;
        &lt;TouchableOpacity
          style={
            card
              ? card.valid
                ? styles.button
                : styles.buttonDisabled
              : styles.buttonDisabled
          }
          disabled={card ? (card.valid ? false : true) : true}
          onPress={updateCard}&gt;
          &lt;Text style={styles.buttonText}&gt;Update Credit Card&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>