0

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.

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

6 Comments

Thanks @Nick. This solves my problem but nothing is displaced when i click on add category button.
displayed* instead of displaced.
modal has the same changes. data-toggle= 'modal' should now be: data-bs-toggle= 'modal'.
when i click on add category nothing is displayed as in code i have const showCategoryModal = () => ( <div id='addCategoryModal' className= 'modal'>Inside modal</div> );
Change this: data-toggle= 'modal' data-target= '#addCategoryModal' to: data-bs-toggle= 'modal' data-bs-target= '#addCategoryModal'
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.