The icon is missing from the implementation, but it is visible in the demonstration

  • I'm facing an issue with adding the delete icon at the end of my chip.
  • It works perfectly in the Material UI demo, but not in my own code.
  • I've tried debugging, but I still can't pinpoint the problem. The icon is supposed to show up due to this line: deleteIcon={}
  • Would changing the button tag to a chip tag be causing the problem?
  • Here's a snippet of my code:

Not working: Check it out here

Working Demo: Try this demo instead

import DoneIcon from '@material-ui/icons/Done';

        <Chip
          style={{ display: this.state.display ? "" : "none" }}
          label={this.state.chipName}
          onDelete={this.handleDelete}
          color="primary"
          deleteIcon={<DoneIcon />}

        />
        <chip
          style={{ display: this.state.display ? "none" : "" }}
          onClick={this.handleClickOpen}
          color="primary"
          deleteIcon={<DoneIcon />}
        >
          Open Menu
        </chip>

Answer №1

To improve your code, consider adding the prop onDelete={() => {}}. See how it's done in the example below:

<Chip
      style={{ display: this.state.display ? "" : "none" }}
      label={this.state.chipName}
      onDelete={this.handleDelete}
      color="primary"
      deleteIcon={<DoneIcon />}
      onDelete={() => {}}
/>

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

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

Disable the smooth scroll animation when transitioning between pages using the Link component in NextJS

Not sure if this is a new feature of Next.js, as I didn't encounter this issue in my previous Next.js project. When I reach the bottom of a page and try to navigate to another page, a scroll-to-top animation appears on the destination page. I want to ...

Error: React is unable to access the 'params' property because it is undefined

I'm currently learning React and am attempting to pass an ID from one component to another. I accomplished this using the following code: <a className="btn btn-view" href={`/buyer/viewpostdetails/${posts._id}`}>View Post <i classNam ...

I am looking to incorporate a database field into a dropdown menu for use in a GET API request

page.ts retrieveData() { var url = 'http://hostname/databasename/.php'; var info = JSON.stringify({}); this.http.post(url, info).subscribe(response => { if (response == 0) { this.info = false; } e ...

What is the method for customizing the default dropdown color of a bootstrap 4 selectpicker?

In my form, there are single and multiple dropdown selects. To keep things simple, I use the selectpicker class for both types. However, I want to customize the default grey color for Bootstrap 4 Dropdown with the selectpicker class to a clear color. Which ...

What is the best method for customizing the color of angularjs spinners?

As I delve into developing an AngularJS application, my focus has been on seamlessly integrating an AngularJS spinner. Taking it a step further, I managed to tailor some of the spin-kit CSS properties to customize the appearance and behavior of the spinn ...

Utilizing AjaxChosen for event handling

I am currently experimenting with a jQuery plugin that can be found here: https://github.com/meltingice/ajax-chosen. I have a multiple select field and I am curious about which event is triggered when a user either deletes or selects a value. Here are the ...

Issue with res.redirect not functioning as expected

I am having some difficulty with the use of res.redirect() in my express application. After searching through other questions, I haven't found a solution that directly addresses my specific issue or is detailed enough to be useful. app.get(/\d& ...

Discovering the orientation of an object in relation to the camera

I'm encountering a challenge in determining the angle of an object in relation to the camera. My goal is to write code for a spaceship with a camera that follows it. While I have successfully made the camera track the ship, there are instances where t ...

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

Guide to setting a dynamic value for an input List property in Angular

How can I render multiple dropdowns in Angular based on the response from an API? Currently, when I retrieve data from the API, I am seeing the same information displayed in both dropdown controls. Is there a way to assign dynamic values to the "list" prop ...

What is the best way to conceal a browser's menu bar?

I'm currently working on an ASP.NET project for an online quiz platform. The questions are being selected randomly from a pool of options. Everything is functioning correctly, but I am looking to restrict users from saving or printing the test by hidi ...

When working with React Native, encountering an issue where passing props using the Map function results in an error stating "undefined is not a function" near the section of code involving the

Hey there! I'm currently facing an issue with fetching data from my Sanity CMS and passing it as props to a child component. Interestingly, the same code worked perfectly on another screen, but here I seem to be encountering an error. Although the dat ...

The method for retrieving and entering a user's phone number into a text field upon their visit

Objective: To enhance the user experience by automatically filling in the phone number input field when a mobile user views the page, making it easier to convert them into leads. A privacy policy will, of course, be in place. This page will offer a promo ...

Is the `ng-model` for the AngularStrap `bs-typeahead` component not accessible in the current scope?

I am encountering a problem with the ng-model value in an element that uses AngularStrap's bs-typeahead. It seems to not be accessible within the scope, but it works fine when accessed using {{ var }} in the HTML. Here is the HTML code: <input ty ...

In search of assistance with resolving a React Typescript coding issue

I need help converting a non-TypeScript React component to use TypeScript. When attempting this conversion, I encountered the following error: Class 'Component' defines instance member function 'componentWillMount', but ext ...

Activate the search function once the user has finished entering text

Currently facing the following issue: Within my JavaScript file, I have the below code snippet, termChange(evt) { this.rows = []; this.searchTerm = evt.target.value; this.getCases(); } This section of code clears out the ...

``motioning a component beneath another component that may be in a state

Having an issue with my CSS. I have some elements generated by JavaScript and when hovering over them, another element is displayed below the others for some reason. Here's the CSS related to this problem: .hiddenTextjob { display:none; ...

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

Display outcome generated by JavaScript in the input box

I've successfully implemented a date/time picker in a form. Using JavaScript, I've created a script to calculate the difference between two date fields and display it in a third field labeled Course Duration. However, I'm encountering an i ...