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.