In this article, we are going to learn how to add a href to the react-bootstrap table column dynamically. In this article, we will create a React Bootstrap table and an input form to add data dynamically with a href.
Prerequisites:
Steps to Create React Application And Installing Modules:
Step 1: Create your react-app by using this command
npx create-react-app appdemo
Step 2: Navigate to your project structure using this command.
cd appdemo
Step 3: Install the required modules i.e. react-bootstrap and bootstrap and other modules as per your requirement. To install react-bootstrap and bootstrap use this command
npm install react-bootstrap bootstrap
Package.json:
"name": "appdemo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Step 4: Create your file with extension .jsx or .js and import the required components from react-bootstrap. Here I am importing Bootstrap CSS and Form, Table, Button components from react-bootstrap.
Project Structure
Approach
- In DynamicLinkDemo, we created a form to take input names and IDs with form validations, and when the user enters the data and presses enter, that data will be stored inside a state called inputData with the help of the handleStoredData() function.
- Data will be stored inside the state in the form of an array, and we are using array methods to map the data with a table format for the display of the various rows.
- In each row, the last cell will contain an example link that is created with the help of an anchor tag in HTML, and the target will be “https://example.com/${data.Id}”
Example: This example shows the use of the above-explained appraoch.
Javascript
// DynamicLinkDemo.jsx import React, { useState } from "react"; import { Table, Form, Button, } from "react-bootstrap"; import "./DynamicLinkDemo.css"; const DynamicLinkDemo = () => { const [inputData, setInputData] = useState({ Id: "", Name: "" }); const [storedData, setStoredData] = useState([]); const handleInputData = (e) => { const { name, value } = e.target; setInputData((prev) => ({ ...prev, [name]: value, }));}; const handleStoredData = (e) => { const validId = inputData.Id.trim(); const validName = inputData.Name.trim(); if (validId !== "" && validName !== "") { setStoredData((prev) => [ ...prev, { ...inputData }, ]); setInputData({ Id: "", Name: "", });} else { alert( "Please enter all the details."); }}; return ( <div className="main-container"> <div className="form-container"> <Form> <Form.Group controlId="Id"> <Form.Label> Id </Form.Label> <Form.Control type="text" name="Id" value={ inputData.Id} onChange={ handleInputData} required /> </Form.Group> <Form.Group controlId="Name"> <Form.Label> Name </Form.Label> <Form.Control type="text" name="Name" value={ inputData.Name} onChange={ handleInputData} required /> </Form.Group> <Button variant="primary" onClick={ handleStoredData} className="addButton"> Add </Button> </Form> </div> <div className="table-container"> <Table striped bordered hover> <thead> <tr> <th>Id</th> <th>Name</th> <th>Link</th> </tr> </thead> <tbody> {storedData.map( ( data, index ) => ( <tr key={ index }> <td> { data.Id} </td> <td> { data.Name} </td> <td> <a href={ `https://example.com/${data.Id}`}> Link </a> </td> </tr>))} </tbody> </Table> </div> </div> ); }; export default DynamicLinkDemo; |
Javascript
// App.js import React from "react"; import DynamicLinkDemo from "./DynamicLinkDemo"; import "./App.css"; const App = () => { return ( <div className="component"> <DynamicLinkDemo /> </div> ); }; export default App; |
Javascript
// Index.js import React from "react"; import ReactDOM from "react-dom"; import "bootstrap/dist/css/bootstrap.min.css"; import App from "./App"; ReactDOM.render( <App />, document.getElementById("root") ); |
CSS
/* DynamicLinkDemo.css */.main-container { display: flex; justify-content: space-between; padding: 20px; } .link-class { color: green; text-decoration: none; } .form-container { width: 45%; padding: 20px; border: 1px solid #ccc; } .table-container { width: 45%; padding: 20px; border: 1px solid #ccc; } .addButton { margin-top: 20px; background-color: green; } @media (max-width: 768px) { .main-container { flex-direction: column; } .form-container, .table-container { width: 100%; margin-bottom: 20px; } } |
CSS
/* App.css */.component { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } |
Steps to run the application:
npm start
Output:
Output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
