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; |
Output:
Reference: https://react-bootstrap.netlify.app/docs/components/close-button/#api
React-Bootstrap Close Button API
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.
Contact Us