React Fragment not rendering in function

Question

Here's my React component below, can anyone understand why the react.Fragment doesn't render at all in the getResults function?

I'd like it to eventually display the results from the api response.

My api query works fine and I can get the data I'm after but I'm struggling displaying it in the component.

import React from "react";
import axios from "axios";
import SearchInput, {
  createFilter
} from "react-search-input";
import {
  spotifySearchURL
} from "../../constants";

export class SearchPanel extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      tracks: {},
      selectedOption: null
    };
    this.handleSearch = this.handleSearch.bind(this);
  }

  getSearchValue(value, token) {
    this.setState({
      searchValue: value
    });
    this.handleSearch(value, token);
    console.log(value);
  }

  getResults() {
    let tracks = this.state.tracks;
    let track;
    Object.keys(tracks).map(function(key, items) {
      track = tracks[key];
      console.log(track, track.name);
      return ( 
       <React.Fragment >
        <h1 > {track.name} < /h1>
       </React.Fragment>
      );
    });
  }

  handleSearch = (value, token) => {
    const encoded = encodeURIComponent(value);
    let url = `${spotifySearchURL}${encoded}&type=track`;
    console.log(url);

    const params = {
      headers: {
        Authorization: " Bearer " + token,
        accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded"
      },
      data: null
    };

    axios
      .get(url, params)
      .then(response => {
        this.setState({
          tracks: response.data.tracks.items
        });

        console.log(response.data.tracks.items);
      })

      .catch(error => {
        console.log(error);
      });
  };

  render() {
    return ( 
     <div className ="search-panel">
      <SearchInput
       className = "search-input"
       value = {
         this.state.searchValue
       }
       onChange = {
         value => this.getSearchValue(value, this.props.token)
       }
      />

      {this.getResults()}
     </div>
    );
  }
}

export default SearchPanel;

Answer 1

You have to return the array that is returned from map from getResults.

getResults() {
  let { tracks } = this.state;
  let track;

  return Object.keys(tracks).map(function(key, items) {
    track = tracks[key];

    return ( 
      <React.Fragment>
        <h1> {track.name} </h1>
      </React.Fragment>
    );
  });
}