Question

89

How can I render an array of jsx elements in ReactJs

rated 0 times [ 92] [ 3] / answers: 1 / hits: 5388 / 6 Years ago, thu, july 19, 2018, 12:00:00

So I am trying to make it so when you click the search button, it displays all the artist's names but when I click search nothing happens. When I do

console.log(artistsArray.name);

it gives me a list of all the artist's names for the search query so I'm not sure what I am missing; I am also new so sorry if I didn't explain well.

this is my search function

  searchAlbums(){

    spotifyWebApi.searchAlbums(this.state.value)

    .then((response) => {

      return response.albums.items.map((t) => {

        return t.artists.map((artistsArray, index) => {

          this.render({

            render(){

              return (

                <div>

                <li key={artistsArray.name}>

                  {artistsArray.name}

                </li>

                </div>

              )

            }

          })

        });

      });

    });

  }

and here is the button

<button class=btn btn-small type=button onClick={() => this.searchAlbums()}>Search</button>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

vaughns

Add To Favorites

Follow

Total Points: 20

Total Questions: 112

Total Answers: 112

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

answered 6 Years ago kaylea · Accepted Answer

You need to render a list of components in render() function.

Not render multiple times for each album.

Here is how you might render a list of album artists.

1. Declare the state to hold albums (an empty array by default) retrieved.

2. On handleSearchClick, retrieve albums and set the albums state.

3. In render(), if album is not found, then display appropriate messages.

4. else create a list of artist components (wrapped in <li>).

5. Display the component by returning it.

⚠️ WARNING: this is not a production/clean code.

class SearchResult extends React.Component {

    state = { albums: [] };



  searchAlbums = async (searchValue) => (await spotifyWebApi.searchAlbums(searchValue));



  handleSearchClick = async (e) => {

    const searchValue = e.target.value;

    const {items: albums} = await this.searchAlbums(searchValue);

    this.setState({albums});

  }



  render() {

    const {albums} = this.state;

    if (!album) return <div>loading...</div>;

    if (album.length === 0) return <div>No albums found</div>;



    // Generate artists components.

    const albumsComponents = albums.map(album => 

        album.artists.map(artists => (<li key={artists.name}>{artists.name}</li>)

    }



    return (

      <div>

        Search Term: 

        <input 

          value={this.state.searchTerm}

          onClick={this.handleSearchClick} />

        {albumsComponents}

      </div>

    );

  }

}