如何使用react js在右上角制作带有关闭图标的按钮

Question

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);

Answer 1

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

Stackblitz - https://stackblitz.com/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 uncomment the p tag i the root component.

Answer 2

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