I’m trying to include a Foundation dropdown menu in my React application. However, when I try to add in the normal code for the dropdown menu, the dropdown functionality does not work, and the the dropdown menu items all automatically display. I also receive the errors:
Uncaught TypeError: $(...).foundation is not a function
at Constructor.componentDidMount (eval at
Below is my code. Thanks so much.
var React = require('react');
var $ = require('jQuery');
var Nav = React.createClass({
componentDidMount: function () {
$(document).foundation();
},
render: function () {
return(
<div>
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas-content" data-off-canvas-content>
<div className="title-bar show-for-small-only">
<div className="title-bar-left">
<button className="menu-icon" type="button" data-open="mobile-menu"></button>
<span className="title-bar-title">MENU</span>
</div>
</div>
<nav className="top-bar nav-desktop">
<div className="wrap">
<div className="top-bar-left">
<h5 className="site-logo">Insurance</h5>
</div>
<div className="top-bar-right">
<ul className="menu menu-desktop dropdown" data-dropdown-menu>
<li>
Linkedin
<ul className="menu">
<li>StackOverflor</li>
</ul>
</li>
<li>Facebook</li>
<li>FAQ</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
}
});
module.exports = Nav;
Have you imported "foundation-sites" in the "app.js" file.?
Related
I'm creating a static website using reactjs so I downloaded a template and I divide it on components using reactjs but the responsive collapse navdar doesn't work anymore and I'm trying to fix it so I tried many solutions but I got nothing.
There are no errors but the code still doesn't work.
can you help me please!
this is the navbar component.
import React, {useState,useEffect} from 'react';
import '../assets/css/style.css';
import '../assets/css/slick.css';
import '../assets/css/magnific-popup.css';
import '../assets/css/animate.css';
import '../assets/css/bootstrap.min.css';
import '../assets/css/home7fonts.css';
import Logo from '../assets/images/logos/logo-black.png'
function Header()
{
const [toggleMenu, setToggleMenu] = useState(false)
const [screenWidth, setScreenWidth] = useState(window.innerWidth)
const toggleNav = () => {
setToggleMenu(!toggleMenu)
}
useEffect(() => {
const changeWidth = () => {
setScreenWidth(window.innerWidth);
}
window.addEventListener('resize', changeWidth)
return () => {
window.removeEventListener('resize', changeWidth)
}
}, [])
return (
<header className="main-header header-seven">
<div className="header-upper">
<div className="container-fluid clearfix">
<div className="header-inner d-flex align-items-center">
<div className="logo-outer">
<div className="logo"><img src={Logo} alt="Logo" title="Logo"></img></div>
</div>
<div className="nav-outer clearfix d-flex align-items-center">
<nav className="main-menu navbar-expand-lg">
<div className="navbar-header">
<div className="mobile-logo py-15">
<a href="index.html">
<img src={Logo} alt="Logo" title="Logo"></img>
</a>
</div>
<button onClick={toggleNav} type="button" className="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="navbar-collapse collapse clearfix">
{(toggleMenu || screenWidth > 500) && (
<ul className="navigation onepage clearfix">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>FAQs</li>
<li>pricing</li>
<li>testimonial</li>
<li>blog</li>
</ul>
)}
</div>
</nav>
<div className="header-number">
<i className="fas fa-phone-alt"></i>
<div className="number-content">
<span>Tell Us</span>
+12 ) 235 - 586 - 56
</div>
</div>
<div className="menu-btn">
<a href="#" className="theme-btn style-eight">Start Free Tral
<i className="fas fa-long-arrow-alt-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
);
}
export default Header;
Go to https://getbootstrap.com/docs/5.1/components/navbar/ and Copy one collapse navbar you like. Past the code in your function components and change class to className, etc.
open your public folder at root directory. Find index.html. Add bootstrap Css between <head>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Add Bootstrap JS after <div id="root">,
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
then, reload your react project. See it work.
I searched for the solution but could not find the exact solution so posted here.
I have a search bar in the header menu. When search content is typed and clicked on search button, the result needs to be display in a new page (eg. result.html). API is used to fetch the searched result.
I have added js pseudo code below which will explain what I intend to do.
Thank you for the suggestion.
navigation
<nav class="navbar navbar-default navbar-fixed-top navbar-search-box animate" role="navigation">
<div class="row">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav" id="main-nav">
<li> ... </li>
<li>
<div class="search-bar-search animate">
<div class="container" ng-controller="searchCtrl">
<div class="input-group">
<input type="text" class="form-control" id="q" ng-model="q" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="search()">Search</button>
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Search.js
var app = angular.module('myApp', ['ngRoute']);
app.service('searchService', function($http) {
this.getResult = function(q) {
// o/p is in JSON format
return $http.get('http://mydomainname/api/search/'+q);
}
});
app.controller('searchCtrl', function ($scope, searchService){
$scope.search = function (){
var q = $scope.q;
searchService.getResult(q).then(function (response){
$scope.result = response.data;
// redirect to new template (result.html) and display result
...
...
});
};
});
i want add some react.js components in ASP.NET mvc application. but react.js sometimes working and not working. i am using gulp-uglify in gulp.js
i have already try to set : dev environment
set NODE_ENV=development
but still I get that error in browser console.
#* React Library *#
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
#* JSX parser library *#
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="/dom.jsx" type="text/babel"></script>
dom.jsx
var object;
var $item_url = "/item/";
var $c_url = "/category/";
var TemplateGrid = React.createClass({
render: function() {
return (
<div className="product-item column">
<span className="pin featured">Featured</span>
<div className="product-preview-actions">
<figure className="product-preview-image">
<img src="assets/images/items/flat_m.jpg" alt="product-image" />
</figure>
<div className="preview-actions">
<div className="preview-action">
<a href={$item_url + this.props.item.name}>
<div className="circle tiny primary">
<span className="icon-tag" />
</div>
</a>
<a href={$item_url + this.props.item.name}>
<p>Go to Item</p>
</a>
</div>
<div className="preview-action">
<a href={$item_url + this.props.item.name}>
<div className="circle tiny secondary">
<span className="icon-heart" />
</div>
</a>
<a href={$item_url + this.props.item.name}>
<p>Favourites +</p>
</a>
</div>
</div>
</div>
<div className="product-info">
<a href={$item_url + this.props.item.ProductId + "/" + (this.props.item.name).replace(/\s/g, "_")}>
<p className="text-header">{this.props.item.name}</p>
</a>
<p className="product-description"></p>
<a href={$c_url + this.props.item.Category}>
<p className="category primary">{this.props.item.Category}</p>
</a>
<p className="price"><span>$</span>12</p>
</div>
</div>
);
}
});
var Widgets = React.createClass({
getInitialState: function(){
return {
items: []
}
},
componentDidMount:function(){
$.get(this.props.dataUrl, function (data) {
object = data;
if(this.isMounted()){
this.setState({
items: data.tumb
});
}
}.bind(this));
},
componentDidUpdate: function () {
$(".slide-control.left,.slide-control.right").append('<svg class="svg-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg>');
setTimeout(function () {
$('.owl-carousel').owlCarousel('refresh');
}, 1000);
},
render : function(){
var rows = [];
var left = [];
var right = [];
this.state.items.forEach(function (item) {
var i=0;
var o = object.objects[i]; i++;
document.getElementById('Thumb-title').innerText = o.name;
rows.push(<TemplateGrid key={item.ProductId} item={item} />);
});
return (
<div className="product-showcase">
<div className="headline primary">
<h4 id="Thumb-title" />
<div className="slide-control-wrap">
<div className="slide-control left">
</div>
<div className="slide-control right">
</div>
</div>
</div>
<div id="pl-1" className="product-list grid column4-wrap owl-carousel">
{rows}
</div>
</div>
);}
});
ReactDOM.render(
<Widgets dataUrl="/thumb/8/1" />,
document.getElementsByClassName('w1')
);
I was using react with flux. When I checked in the console, values are coming but when I check in React developer tools, expected value is empty. If I am sending a single object then it is working fine. But if an array is sent, then nothing is displayed.
Can anybody please tell what is the problem? The code and image of the same is as below.
Code:
var Product = React.createClass({
render: function(){
var product = this.props.product;
return (<div className="col-md-8"><hr/>
{product.map(function(items){
console.log(" Items in the field :"+JSON.stringify(items));
<div className="col-sm-6">
<div className="col-sm-4">
<img src={"/src/image/"+ items.image}/>
</div>
<div className="col-sm-2">
<h2> {items.name} </h2>
<p> {items.description} </p>
<h3> Price: ${items.price} </h3>
<h4>Inventory: {items.inventory}</h4>
</div>
</div>
})}
</div>
)
}
});
You need to return from function call
var Product = React.createClass({
render: function(){
var product = this.props.product;
return (<div className="col-md-8"><hr/>
{product.map(function(items){
console.log(" Items in the field :"+JSON.stringify(items));
return (<div className="col-sm-6">
<div className="col-sm-4">
<img src={"/src/image/"+ items.image}/>
</div>
<div className="col-sm-2">
<h2> {items.name} </h2>
<p> {items.description} </p>
<h3> Price: ${items.price} </h3>
<h4>Inventory: {items.inventory}</h4>
</div>
</div>);
})}
</div>
)
}
});
I am implementing Materialize modal in react but it does not show anything. I separated the modal into component and the button that calls the modal in the parent container.
Here is my code:
Parent.js:
return (
<div>
<div>
<HelpForm />
</div>
<div className="container">
<ul className="collection">
{items.map(item =>
<a refs="modalTrigger" className="modal-trigger"
key={item.id}
data-target="#modal1">
<HelpFeedItem key={item.id} item={item} />
</a>
)}
</ul>
<HelpFeedModal />
</div>
</div>
);
Modal.js
render() {
return (
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div className="modal-footer">
Agree
</div>
</div>
);
Is there something obvious that I am missing?
Thanks!
I got this to work by including jQuery in my project and then adding the suggested jQuery code at the top the render function in a component.
index.html:
<html>
<body>
//Any other html
<script src="jquery cdn of your choice"></script>
</body>
</html>
ModalComponent.js:
class Modal extends Component {
render() {
//You must use window.$ or $ will be undefined
window.$(document).ready(function() {
window.$('.modal').modal();
});
return (
<div>
//this is the trigger
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
//this is the modal
<div id='modal1' className='modal'>
<div className='modal-content'>
<h4>Modal Header</h4>
<p>Text in the modal body</p>
</div>
</div>
</div>
)
}
}
You need to use react-materialize in order to use Materialize's javascript components. https://github.com/react-materialize/react-materialize