React Native different categories rendered to header component

I am developing a React Native quiz application. I already have developed the header component and it looks fantastic.

// import libraries for making a component
import React from 'react';
import { Text, View } from 'react-native';

// make a component
const Header = (props) => {
  const { textStyle, viewStyle } = styles;
  return (
    <View style={viewStyle}>
      <Text style={textStyle}>{props.headerText}</Text>;
    </View>
  );
};

const styles = {
  viewStyle: {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  textStyle: {
    fontSize: 20
  }
};

// make a component available to other parts of the app
export default Header;

I am going to be doing an ajax request to an api that has a category and then one quiz question per category.

When I make a GET request to this endpoint I get back an array of objects and each object has a question category and one boolean question of true or false.

So in total I have 10 categories with a question for each category for a total of 10 questions.

So I need to figure out how to make an Ajax request or an http request from my mobile application to fetch this list of data and more critically, once I have the list of data, I need to figure out a way to get the category piece to render as the header.

This is the part I am stuck on.

I plan to have a component called QuestionList, the purpose of QuestionList will be to fetch the list of data or fetch the list of questions and once fetched, it will render several QuestionDetail components. So I will have a QuestionList and a QuestionDetail.

But again the api has a category for each question and I want to render that category content as the header for each question. So a different header each time the user goes to the next question.

So in the code above, rather than letting the header component decide what text should be displayed I refactored it slightly so that the app component will decide what text to show in there.

Did I just mess this up in terms of what I am trying to accomplish? Should I have let the header component decide what text should be displayed? And more importantly how do I get the header component or the App component to render the different categories? Should I be creating a separate CategoryList component and then a CategoryHeader component for each specific component that renders a different category from the api?