Bootstrap data-toggle and data-target not working-CodePudding

As I am new in Bootstrap and react. I am facing error when I click on add category button nothing is shown. I have applied data-toggle and data-target on add category button but its not working.

Here the code i'm using. Showroom.js file.

import React from "react";

const ShowroomDashboard = () => {
/*********************** 
 * Views
************************/
 const showHeader = () => (
    <div className='bg-dark text-white py-4'>
        <div className = 'container'>

            <div className='row'>
                <div className='col-md-6'>
                    <h1>
                        <i className= 'fas fa-home'> Showroom Dashboard</i>
                    </h1>
                </div>
            </div>
        </div>
    </div>
);

const showActionBtns = () => (
    <div className = 'bg-light my-2'>
        <div className ='container'>
            <div className ='row pb-3'>
                <div className ='col-md-4 my-1'>
                    <button className ='btn btn-outline-info btn-block' data-toggle= 'modal' data-target= '#addCategoryModal'>
                        <i className ='fas fa-plus'> Add Category </i>
                    </button>
                </div>
                <div className ='col-md-4 my-1'>
                    <button className ='btn btn-outline-warning btn-block'>
                        <i className ='fas fa-plus'> Add Car </i>
                    </button>
                </div>
                <div className ='col-md-4 my-1'>
                    <button className ='btn btn-outline-info btn-block'>
                        <i className ='fas fa-money-check-alt'> View Order </i>
                    </button>
                </div>
            </div>
        </div>
    </div>
);

//id will be of same name as data target attribute in add category button
const showCategoryModal = () => (
    <div id='addCategoryModal' className= 'modal'>Inside modal</div>
);

/*********************** 
* Renderer
************************/

return (
    <section>
        {showHeader()}
        {showActionBtns()}
        {showCategoryModal()}
    </section>
);
};

export default ShowroomDashboard;

Any help will be appreciated.

CodePudding user response：

Are you sure you are using Bootstrap 4 ? They are some changes from Bootstrap Version 4 to version 5!

For example data-toogle is now data-bs-toggle and data-target is now data-bs-target in Bootstrap 5