Сделать что-то в React, только если условие выполнено?

Question

У меня есть приложение, отображающее данные из API страницы за раз. Я хочу отображать кнопку «Назад» только тогда, когда значение pageNumber равно> 1. Изо всех сил пытаюсь понять, почему оно не позволяет мне написать простое выражение if.

Вот код:

const TopRatedPage = () => {
  const [apiData, setApiData] = useState([]);
  const [isLoading, setLoading] = useState(false);
  const [pageNumber, setPageNumber] = useState(1);
  const { results = [] } = apiData;

  useEffect(() => {
    setLoading(true);
    fetchTopRatedMovies(pageNumber).then((data) => setApiData(data));
    setLoading(false);
  }, [pageNumber]);

  return (
    <div className='top-rated-page-wrapper'>
      <h1>TopRatedPage</h1>
      {isLoading ? <h1>Loading...</h1> : <MovieList results={results} />}
      <button
        onClick={() => {
          setPageNumber(pageNumber + 1);
        }}>
        MORE
      </button>
      <button
        onClick={() => {
          setPageNumber(pageNumber - 1);
        }}>
        BACK
      </button>
    </div>
  );
};

Моя цель состоит в том, чтобы сделать кнопку BACK невидимой, если это pageNumber, если значение не равно> 1.

Answer 1

Попробуйте это

return (
        <div className='top-rated-page-wrapper'>
            <h1>TopRatedPage</h1>
            {isLoading ? <h1>Loading...</h1> : <MovieList results={results} />}
            <button
                onClick={() => {
                setPageNumber(pageNumber + 1);
                }}>
                    MORE
                </button>
            {pageNumber > 1 && (
                <button
                    onClick={() => {
                    setPageNumber(pageNumber - 1);
                }}>
                    BACK
                </button>
            )}
        </div>
    );

Answer 2

Вам просто нужно отключить отображение pageNumber:

{pageNumber > 1 && <button
  onClick={() => {
    setPageNumber(pageNumber - 1);
  }}>
    BACK
</button>}