Using MaterialUI to create a GridListTile with two IconButtons

I'm working with a GridListTile and trying to add a second button, but I'm having trouble getting both buttons to display.

Even though I've attempted to include two ActionIcons, only one of them is showing up. Here's the code snippet:

<GridListTile key={tile.img}>
  <img src={tile.img} alt={tile.title} />
  <GridListTileBar
    title={tile.title}
    classes={{
      root: classes.titleBar,
      title: classes.title,
    }}
    actionIcon={
      <a href={tile.link} target="_blank">
        <IconButton aria-label={`star ${tile.title}`}>
          <PlayCircleOutlineIcon
            className={classes.title}
          />
        </IconButton>
      </a>
    }
    actionIcon={
      <a href={tile.link} target="_blank">
        <IconButton aria-label={`star ${tile.title}`}>
          <PlayCircleOutlineIcon
            className={classes.title}
          />
        </IconButton>
      </a>
    }
  />
</GridListTile>

Have any suggestions on how to fix this issue?

Answer №1

Is this the correct solution?

      <GridListTile key={tile.img}>
        <img src={tile.img} alt={tile.title} />
        <GridListTileBar
          title={tile.title}
          classes={{
            root: classes.titleBar,
            title: classes.title,
          }}
          actionIcon={
            <>
              <a href={tile.link} target="_blank">
                <IconButton aria-label={`star ${tile.title}`}>
                  <PlayCircleOutlineIcon className={classes.title} />
                </IconButton>
              </a>
              <a href={tile.link} target="_blank">
                <IconButton aria-label={`star ${tile.title}`}>
                  <PlayCircleOutlineIcon className={classes.title} />
                </IconButton>
              </a>
            </>
          }
        />
      </GridListTile>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

submit a unidirectional post using jquery.post

I am working with a variable named test_string which is set to the value "hello." var test_string = "hello"; I want to send this variable to a PHP page in a one-way communication. I have attempted the following: $.post('php_page.php', test_str ...

Struggling to set a background image for multiple div elements

Hey everyone! I'm working on a small school project website and I've run into an issue with the background on multiple div elements. Here's my HTML code snippet: <div class="bloc-1-text"> <h3> </h3&g ...

Mapping requests in Spring to React Router paths with parameters using path variables

I have a React app running on Spring Boot and I've set up react-router. When a specific link is clicked in the React app, it gets sent to a Spring view controller that processes the URL and returns the "index" template with the React app. The React ro ...

Download multiple Highcharts graphs on a single page

When using Highchart Export, I am currently able to download multiple graphs in a single page PDF. However, I would like the first graph to be on the first page and the second graph on the second page when saving as a PDF. You can find the code in the fol ...

Eliminate unnecessary HTML elements in Angular

I am currently using ngSwitchCase for 3 different cases, and I have noticed that I am duplicating the same code inside each case. Is there a way to eliminate this redundancy? The redundant code is located within the "app-device" component <div *ngS ...

Hover effect for Bootstrap cards

I am working on a view where I display dynamically expanding cards upon hover. Below is the CSS code snippet: .card-deck .card { height:200px; width: 200px; transition: transform .1s; } .card-deck .card:hover { -ms-transform: scale(1. ...

React i18next provides a fallback language in case the specified language is not

In my React app, I have implemented i18next for translating files, using the following approach: i18next.js (original) import i18next from 'i18next'; import XHR from 'i18next-xhr-backend'; import detector from 'i18next-browser-lan ...

Modifying PlaneGeometry with Three.js

Currently, I have a PlaneGeometry representing a T-shirt with a texture and an image for the design. You can see them here: https://i.sstatic.net/0yhDg.png https://i.sstatic.net/V9Mov.png My goal is to incorporate another PlaneGeometry with a texture for ...

My JavaScript array is not working with the stringify function

I am trying to encode my JavaScript array into JSON using stringify. Here is the code: params["margin_left"] = "fd"; params["text"] = "df"; params["margin_to_delete"] = "df"; console.info(params); When I check the output in Chrome console, it shows: [m ...

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

Learn how to iterate over a JSON object using TypeScript in Angular5 to generate an array of objects

Here is a sample JSON code that includes an array "Customers" with objects and arrays nested inside: This is my JSON code snippet: { "Customers": [ { "customerData": { "secondLastName": "Apale", "firstLastName": "Lara", ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

Tips for executing jsfiddle code within Joomla 3.2

I'm having trouble executing this code on my Joomla website. I have Joomla 3.2 installed with the JCK Editor, but the HTML tags are not functioning correctly. Can someone please assist me in running the following code: $("#text10").keyup(functio ...

What are the steps for setting up PancakeSwap V2 on a testnet environment?

I am currently testing the Pancakeswap v2 frontend repository on my local host, but I am encountering an issue when trying to switch to the testnet. (https://github.com/pancakeswap/pancake-frontend) I receive an error message when I change the value of NEX ...

Is it possible to search a JSON Array using a variable as the criteria

I have a JSON Array that needs to be searched: [ { "Device_ID":"1", "Image":"HTC-One-X.png", "Manufacturer":"HTC", "Model":"One X", "Region":"GSM", "Type":"Phone" }, { "Device_ID":"2", "Image":"Motorol ...

Using jQuery to trigger an action when a user clicks on a regular audio element

Is there a way to detect a click on the default audio element of a browser using jQuery? I'm having trouble getting it to work in Chrome. $('audio').click(function(){ alert("You have clicked on an audio player"); }); <script ...

Create an Ajax request function to execute a PHP function, for those just starting out

I came across a JS-Jquery file that almost meets my needs. It currently calls a PHP function when a checkbox is clicked, and now I want to add another checkbox that will call a different PHP function. My initial attempt was to copy the existing function a ...

How can I stack images on top of each other within a div

Currently, I am in the process of creating a blackjack game and encountering an issue with overlapping cards. Despite implementing the code below, all I see is a column of cards displayed. I have looked at similar questions for guidance, but I'm unab ...

The function useQuery from tanstack/react-query is throwing a TypeError

Encountered an issue with TypeError: (0 , tanstack_react_query__WEBPACK_IMPORTED_MODULE_4_.useQuery) is not a function. All imports are correct, yet the error persists. Here is the code snippet: import { useQuery } from "@tanstack/react-query"; ...

Exploring the Unpredictable Results of Recursive Functions in JavaScript

Take a look at this recursive code snippet. function calculateFactorial(n) { if (n === 0 || n === 1) { return 1; } else { console.log(calculateFactorial( (n - 1) )); return n * calculateFactorial(n - 1); } } const num = ...