How to Add href to React-Bootstrap-Table Column Dynamically ?

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:

• React JS
• React-Bootstrap

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