React-Bootstrap Close Button API

Last Updated : 23 Jul, 2024

React-Bootstrap close button API is a way to import Close Button provided by React Bootstrap. In this article we are going to explore Close Button API. Close button is used to close a dialog box or pop up in React Bootstrap.

Close Button Props:

variant: It is used for rendering the button in different colors. By default, It will use a dark color.
onClick: The callback function when you click the button.
aria-label: It shows the relevant information about the close button.

Syntax:

import CloseButton from 'react-bootstrap/CloseButton'

Example 1:

JavaScript

// App.js

import React from 'react';
import TodoList from './TodoList';
function App() {
  return (
    <div className='App'>
      <h1 className="text-center">
          React  To- Do List
      </h1>
      <TodoList />
    </div>
)}
export default App;

JavaScript

// TodoList.js

import React, { useState } from 'react';
import { Container, InputGroup, FormControl, 
         Button, ListGroup, CloseButton
    } from 'react-bootstrap';

const TodoList = () => {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');

    const handleAddTodo = () => {
        if (task.trim() !== '') {
            setTodos([...todos, task]);
            setTask('')}};

    const handleRemoveTodo = (index) => {
        const newTodos = [...todos];
        newTodos.splice(index, 1);
        setTodos(newTodos);};

    return (
        <Container className="mx-auto"
            style={{ maxWidth: '400px' }}>
            <InputGroup className="mb-3">
                <FormControl type="text"
                             placeholder="Add a new task"
                             value={task}
                             onChange={
                                (e) =>
                                    setTask(e.target.value)} />
                <Button variant="primary"
                        onClick={handleAddTodo}>
                            Add
                </Button>
            </InputGroup>
            <ListGroup>
                {todos.map((todo, index) => (
                    <ListGroup.Item key={index}>
                        {todo}
                        <CloseButton style={{ float: "right",
                                              marginLeft: "5px",
                                              fontWeight: "bold",
                                              cursor: "pointer"}}
                                     onClick={() => 
                                        handleRemoveTodo(index)} />
                    </ListGroup.Item>))}
            </ListGroup>
        </Container>)};
export default TodoList;

Output:

Example 2:

JavaScript

// App.js
import React from 'react';
import MyForm from './MyForm';

function App() {
    return (
        <div className='App'>
            <MyForm />
        </div>)}
export default App;

JavaScript

// MyForm.js
import React, { useState } from 'react';
import { Button, Form, Modal, CloseButton } 
    from 'react-bootstrap';


function MyForm() {
    const [showForm, setShowForm] = useState(true);
    const [inputValue, setInputValue] = useState('');
    const handleClose = () => setShowForm(false);
    const handleSubmit = (e) => {
        e.preventDefault();
        alert('Submitted: ' + inputValue)};

    return (
        <div>
            <Modal show={showForm} 
                   onHide={handleClose}>
                <Modal.Header>
                    <Modal.Title>Form</Modal.Title>
                    <CloseButton onClick={handleClose} />
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={handleSubmit}>
                        <Form.Group controlId="formBasicText">
                            <Form.Label>Text Input</Form.Label>
                            <Form.Control type="text"
                                          placeholder="Enter text"
                                          value={inputValue} 
                                          autoComplete='off'
                                          onChange={(e) => 
                                            setInputValue
                                                (e.target.value)}/>
                        </Form.Group>
                        <Button style={{ marginTop: "20px" }} 
                                variant="primary" 
                                type="submit">
                            Submit
                        </Button>
                    </Form>
                </Modal.Body>
            </Modal>
        </div>
)}
export default MyForm;