Получение строки из другой функции в React

У меня есть класс, который обращается к API и возвращает значение в API:

import React from 'react';

class UserList extends React.Component {
    constructor(props) {
        super(props);

        this.state = { customer: [] };
    }

    componentDidMount() {

        fetch('https://surpriserecommenderapi.herokuapp.com/[email protected]', {
            method: "post",
            headers: {
                "Content-Type": "application/json"
            }
        }).then(response => {
            // *** Check for HTTP success
            if (!response.ok) {
                throw new Error(`HTTP error ${response.status}`);
            }
            // *** Read the body, parse it as JSON
            return response.json();
        })
        .then(({ prediction }) => this.setState({ customer: prediction }))
        .catch(error => {
            // ...*** handle/report error...
        });
    }

    render() {

        const customers = this.state.customer.map((item, i) => (
            <div>
                <h1>{item}</h1>
            </div>
        ));

        return (
            <div id = "layout-content" className = "layout-content-wrapper">
                <div className = "panel-list">{customers}</div>
            </div>
        );
    }
}

export default UserList;

{customers} возвращает строку «Рим» для отображения на веб-сайте. Я пытаюсь назвать это в App.js. Я могу вызвать UserList и отобразить «Рим», однако я хочу создать оператор if, который проверяет, какое значение отображается. Как это:

const recommended = <UserList></UserList>
console.info(recommended);

  const recommendedPackage = () => {
    if (recommended === "Roam in Rome"){
      return(
        <div>Recommended package: Roam in Rome</div>
      )
    } else {
      return(
        <div>No recommended package</div>
      )
    }
  }

Любая помощь будет оценена по достоинству!