in reactjs how to make button with close icon in right corner using react js. in my below code when i run the page i want to make button with close icon in right corner.when i click cross icon then button is closed.

How can we do that.anyone please help me out.i am stuck on that.its very thankful.

how can we do that this type button which i have posted i want to make this type when i run the page using reactjs .anyone know about that using reactjs

check here in my code.in here i wan to make cross icon with right corner =/src/index.js

import React from "react";
import ReactDOM from "react-dom";

// import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <button
          className="btn btn-danger"
          // onClick={() => {
          //   if (window.confirm("Delete the item?")) {
          //     let removeToCollection = this.removeToCollection.bind(this, 121);
          //     removeToCollection();
          //   }
          // }}
        >
          Warning Meaasge with close option
        </button>
      </div>
    );
  }

  removeToCollection(key, e) {
    console.log(key);
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

in reactjs how to make button with close icon in right corner using react js. in my below code when i run the page i want to make button with close icon in right corner.when i click cross icon then button is closed.

How can we do that.anyone please help me out.i am stuck on that.its very thankful.

how can we do that this type button which i have posted i want to make this type when i run the page using reactjs .anyone know about that using reactjs

check here in my code.in here i wan to make cross icon with right corner https://codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js

import React from "react";
import ReactDOM from "react-dom";

// import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <button
          className="btn btn-danger"
          // onClick={() => {
          //   if (window.confirm("Delete the item?")) {
          //     let removeToCollection = this.removeToCollection.bind(this, 121);
          //     removeToCollection();
          //   }
          // }}
        >
          Warning Meaasge with close option
        </button>
      </div>
    );
  }

  removeToCollection(key, e) {
    console.log(key);
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• javascript
• html
• reactjs
• bootstrap-4

• Anyone plz help me out . its very thankful i am stuck on that – sneha Commented Apr 23, 2021 at 15:05
• Are you using bootstrap react module of just js library file? – Zam Abdul Vahid Commented Apr 23, 2021 at 15:14
• yes we can use bootstrap npm packages – sneha Commented Apr 23, 2021 at 15:15
• how can we make this type which i have posted image is there any idea using reactjs can u plz check here n my code codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js – sneha Commented Apr 23, 2021 at 15:16
• codesandbox.io/s/awesome-violet-ddpf9?file=/src/index.js in here my code i want to add only cross icon – sneha Commented Apr 23, 2021 at 15:17

2 Answers 2

Created a custom Modal ponent and injected it in App ponent.

Stackblitz - https://stackblitz./edit/reactjs-example1-yz2mez?file=index.js

Note:- You can replace the html mark up using bootstrap structure if you need to. If you want to open the dialog once closed, you can unment the p tag i the root ponent.

You can create a div and style accordingly, if you want to perform a specific function on onClick, then you can use event.target.id . I have used the state to show and hide button.

Sample Code - https://codesandbox.io/s/close-icon-at-top-5czwf?file=/src/index.js