Creating a dropdown menu using HTML and CSS

Looking for assistance with implementing a dropdown list in HTML/CSS, specifically in React? Check out this tutorial: Link

However, after trying to incorporate and modify the code in your React project, nothing seems to work. It appears to be an issue related to bootstrap that you're unable to pinpoint. Here's what's happening:
https://i.sstatic.net/ylVvT.png

Below is the code snippet:

import React, { Component } from "react";
import "./VerticalDots.css";


export default class VerticalDots extends Component {

  render() {
    return (
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src={require("../imgs/3dots-vertical.png")} alt="NotFound"/>
        </button>

        <ul class="dropdown-menu">
          <li>0123 4567 8912 3456</li>
          <li>0123 4567 8912 3456</li>
          <li>0123 4567 8912 3456</li>
        </ul>
      </div>
    );
  }
}

Your guidance would be greatly appreciated!

Answer №1

It appears that the Bootstrap assets are not being loaded. The Codepen link provided shows that Bootstrap is required under "Settings > CSS" and "Settings > JavaScript".

To load these assets, you need to import them from your bundle. For example, if you are using webpack, you can do so in App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

Alternatively, you can use a CDN like Codepen does, but it's advisable to use the above method for a production build.

Answer №2

Resolved by including the following lines:

require 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with passing props to class components in Next.js when using getInitialProps()

I seem to be getting empty results. Can you help me figure out what I'm doing wrong? This is the code in indx.js: export default class Home extends React.Component { static async getInitialProps(ctx) { const test = 'test 123' r ...

Load fresh data using React

I've successfully designed a grid layout showcasing 9 images retrieved from an API: getImages() { let url = 'URL'; fetch(url) .then(response => response.json()) .then(data => this.setState({ posts: data.pos ...

Incorporate data into arrays within an object using React

How can I transfer data from importFile.js to dataTable.js? importFile.js dataTable.js I attempted to convert nested arrays in the imported data from importFile.js into an object of arrays using the following function: const newArray = [data].map( ([f ...

What is the appropriate syntax for the second division?

<style> .panel{ border:1px solid #000; } </style> <div class="body"> <div class="panel"></div> <div class="panel" style="border-top:0px;"></div> </div> In order to apply the style border-top:0px; to ...

Adjusting the Image Width in React to Match Bootstrap Column Width

Exploring the capabilities of the react-image-mapper library, I stumbled upon an interesting feature: the ImageMapper component offers a prop called width, representing the image width in pixels. Integrating this component into my application based on the ...

Utilizing i18next for text and hyperlink presentation within a react native environment

I need assistance with translating dynamic content that contains text and links in it. Can anyone guide me on how to effectively utilize i18next in react native to display this type of content so that the link tags are clickable within the view? {"som ...

Error: Material UI search bar doesn't refresh interface

I implemented Material UI's auto complete component to create a dynamic select input that can be searched. The component is fed options in the form of an array consisting of strings representing all possible choices. <Grid item xs = {props.xs} cla ...

Troubles encountered during the development of Nextjs/Javascript application

I encountered the following errors while developing my application. I am unsure of the reason behind this issue. I created a fetch request in a separate function and attempted to call this fetch function (which is structured as a custom react hook) within ...

The second timer leading up to the event is malfunctioning

Is there a way to incorporate separate identifiers for days, minutes, and seconds when making multiple deductions from an event? Currently, I am only displaying one countdown instead of two. How can this be improved? </head> <?php $date = ...

Combining various MySQL query results into a single array key element in PHP

I currently have a MySQL database that houses various 'heating profiles', each profile has its own table and there is a separate table to manage the names of these profiles. To ensure my jQuery Mobile / Cordova HTML 5 page dynamically loads base ...

What are the best techniques for organizing SCSS in Next.js?

There are multiple pages with some unused items. Is there a method to search and delete all the items based on their classname? Appreciate any assistance you can provide! ...

Arrange divs in a vertical stack while maintaining a layout with two columns

I am trying to create a layout with two stacked `div`s on one side, and then have a single column on the other side that is the same height as the left `div`s. Something similar to this: https://i.stack.imgur.com/ODsEd.png I currently have the two `div` ...

What is the best way to incorporate the information from my CSV file onto my website?

I am currently working on a project where I need to extract data from a CSV file and display it on my website. The idea is to use two values as x and y coordinates, similar to a graph, and retrieve the data at that specific location. Here is the HTML code ...

React's setState is not causing a re-render when used with Contexts

My React component updates its state after completing a request. Within the render function of this component, I am creating a context provider and passing in the current state value. class App extends React.Component { constructor(props) { s ...

Implementing multiple lists in a dropdown menu in React and dynamically displaying one based on the state

I am struggling to load multiple lists in options based on the selected country. I have tried various approaches but can't seem to get it right. Initially, I attempted to load all the lists and place them in <option> # lists <datalist id=&q ...

Monitor the traffic on my website by implementing .htaccess restrictions

I am maintaining a website with restricted access to specific IP addresses listed in the .htaccess file. I am looking to implement a logging system that tracks unauthorized attempts to access the site. Is it feasible to record each attempt in a database? ...

What is the easiest way to add color coding to a code block in HTML?

Creating a color-coded code block on a website to showcase HTML/CSS components can be a tedious process. Is there a faster way to achieve this? An example of messy code blocks can be seen on Bootstrap 5's buttons page. The implementation involves num ...

Data Table is showing incorrect data after filtering in React

React Data being replaced in Data table after filtering Technologies used: React with TypeScript and GraphQL (Apollo Client). We have utilized react-data-table-component and mui/material. However, the data in both modules is being replaced after filteri ...

Issues with aligning content in the Body Content div on Internet Explorer 6

I've encountered a challenging issue with alignment on a website I'm currently working on in IE6. Interestingly, the site looks perfect on all other browsers such as Firefox, Opera, Chrome, and Safari, as well as newer versions of Internet Explor ...

Trigger Vue method when the size of a div element changes

Is there a way to trigger a method every time the dimensions (width or height) of a div element change? <template> <div> </div> </template> <script> export default { methods: { updateSize() { // ...