I'm creating a host of a bunch of pages, and those pages are created dynamically. Each page has a function that I'd like to call at a specific time, but when trying to access a ref for the page, the current is always null.
export default class QuizViewPager extends React.Component<QuizViewPagerProps, QuizViewPagerState> { quizDeck: Deck | undefined; quizRefMap: Map<number, React.RefObject<Quiz>>; quizzes: JSX.Element[] = []; viewPager: React.RefObject<ViewPager>; constructor(props: QuizViewPagerProps) { super(props); this.quizRefMap = new Map<number, React.RefObject<Quiz>>(); this.viewPager = React.createRef<ViewPager>(); this.state = { currentPage: 0, } for (let i = 0; i < this.quizDeck!.litems.length; i++) { this.addQuiz(i); } } setQuizPage = (page: number) => { this.viewPager.current?.setPage(page); this.setState({ currentPage: page }) this.quizRefMap.get(page)?.current?.focusInput(); } addQuiz(page: number) { const entry = this.quizDeck!.litems[page]; var ref: React.RefObject<Quiz> = React.createRef<Quiz>(); this.quizRefMap.set(page, ref); this.quizzes.push(<Quiz key={page} litem={entry} index={page} ref={ref} pagerFocusIndex={this.state.currentPage} pagerLength={this.quizDeck?.litems.length!} setQuizPage={this.setQuizPage} navigation={this.props.navigation} quizType={this.props.route.params.quizType} quizManager={this.props.route.params.quizType === EQuizType.Lesson ? GlobalVars.lessonQuizManager : GlobalVars.reviewQuizManager} /> ) } render() { return (<View style={{ flex: 1 }}><ViewPager style={styles.viewPager} initialPage={0} ref={this.viewPager} scrollEnabled={false}> {this.quizzes}</ViewPager></View > ); }};You can see in addQuiz() I am creating a ref, pushing it into my map, and passing that ref into the Quiz component. However, when attempting to access any of the refs in setQuizPage(), the Map is full of refs with null current properties.