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
Related
I was able to use the map method to display my static data in each container. There's a Modal template I created in order to provide more object/values info but if I click the button it opens all the modals of each containers at the same time because Modal tag wasn't assigned with unique index number when I mapped through my static data. Big brothers, please look at my codes and teach me how I can open only one associated Modal.
I created function Modal (template) and import to function Projects
function Modal({closeModal}) {
return (
<div className="modal-main">
<div className='modal-card'>
<img src="" />
<div className='modal-info'>
<div className='modal-title'>
<p className="title">title</p>
</div>
<div className='modal-body'>
<p className="tech">tech</p>
<p className="description">description</p>
<p className="github">github</p>
<p className="website">website</p>
</div >
<Button>detail</Button>
<Button onClick={()=> closeModal(false)}>close</Button>
</div>
</div>
</div>
)
}
export default Modal
function Projects() {
const [openModal, setOpenModal] = useState(false);
const [oneProject, setOneProject]
= useState(list_of_projects)
return (
<div className="section-header text-center mt-5">
<h4>projects</h4>
<p>list of proejcts</p>
<div className="proj-container">
{oneProject.map((item, index)=> {
return(
<div className='proj-map mx-2 my-2'key={index} >
<button type='button' className="btn btn-link " onClick={() => setOpenModal(true)}>
<div className=" proj-card card">
<img className='proj-img' src={item.thumbnail} style={{ width:300, height:300 }}/>
<div className="proj-text card-text">
<h3 className='title'>{item.title}</h3>
<h5 className='description'>description</h5>
<br/>
<h4>+</h4>
</div>
</div>
</button>
{openModal && <**Modal** closeModal={setOpenModal} /> }
</div>
)
})}
</div>
</div>
This is ant-react project.
html:
<div class="list">
<div class="item">
<div>
<div>
<div class="head">
<span>name 1</span>
</div>
<div class="body">
<div>
<button>done</button>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div>
<div>
<div class="head">
<span>name 2</span>
</div>
<div class="body">
<div>
<button>done</button>
</div>
</div>
</div>
</div>
</div>
js:
cy.get(`div:contains('name1')`)
.should('be.visible')
.invoke('show')
.should('be.visible')
.find('button:contains("Done")').eq(0).click({ multiple: true })
There are a lot of item elements. I need to click on the 'Done' button of the element with name "name 1".
But every time i get error:
Timed out retrying after 4050ms: cy.click() failed because this element is detached from the DOM.
...
Cypress requires elements be attached in the DOM to interact with them.
How can I do it?
You can do something like this. The first parent will go to <div class="head"> and the next parent will move to div just above. Now using within we will make sure that the Done button is clicked for name 1.
cy.contains('span', 'name1')
.parent()
.parent()
.within(() => {
cy.contains('button', 'done').click()
})
I'm working on a react.js project.Aos animation does not work when i refresh the page.It works when I open another page and come back.
import 'aos/dist/aos.css';
import AOS from 'aos';
function MenuCard(props) {
AOS.init();
AOS.refresh();
return (
<>
<div className="row">
<div className="col">
<div class="card bg-dark text-white" id="cardBody" data-aos="flip-left" data-aos-duration="800">
<img src={photos[`${props.id}`]} id="image" class="card-img" alt="..." />
<div class="card-img-overlay" id="cardImg">
<div id="baslik">
<a class="card-title" href={`#${props.title}`} id="cardTitle">{props.title}</a>
</div>
</div>
</div>
</div>
</div>
</>
)
}
I solved this issue with this code
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() { AOS.refresh(); }, 500);
});
it refreshes AOS after 0.5 seconds.
I am doing ReactJS using MaterializeCSS for my UI and
I have a script in JS that looks like one below for MaterializeCSS so that I could use modal class.
$(document).ready(
function () { initializeMaterialize() }
);
function getUUID()
{
return (Math.random().toString(36).substring(2)+(new
Date()).getTime().toString(36));
}
function initializeMaterialize() {
$('.modal').modal();
$('select').material_select();
$('select[required]').css({display: 'inline',height: 0,padding: 0,width: 0});
}
In my main index.html I called the following as per suggestion from Materialize website:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/readable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
I was able to use modal and all for Materialize CSS with no problem until I clicked a link from below:
<div className="row">
<div className="row readable-list-card z-depth-4">
<div className="float-date">{postDate}</div><br/>
{/* Title here */}
<div className="row">
{/* Once I click the below link */}
<a href={url} onClick={this.handleFetchComments}>
<div name="title" ref="myTitle" className="card-title truncate"><strong>Title : </strong>{post.title}</div>
</a>
</div>
{/* Author */}
<div className="row">
<div>By : {post.author}</div>
</div>
{/* Vote, Comments, Edit, Delete */}
<div className="row readable-list-card-bar col s12">
<div className="col s6">
<div className="chip"><strong className="bold">Vote : </strong><span className="chip-color">{post.voteScore}</span></div>
<div className="chip"><strong className="bold">Comment : </strong><span className="chip-color">{post.commentCount}</span></div>
</div>
<div className="col s4">
<a className="tooltip2" href="" onClick={this.handleVotePost}><span className="tooltiptext">Vote up</span><i className="material-icons" id="upVote">thumb_up</i></a><span> </span>
<a className="tooltip2" href="" onClick={this.handleVotePost}><span className="tooltiptext">Vote down</span><i className="material-icons" id="downVote">thumb_down</i></a>
</div>
<div className="col s2">
<a className="tooltip2 modal-trigger" href="#edit-post" onClick={this.handlePassPost}><span className="tooltiptext">Edit post</span><i className="material-icons">edit</i></a>
<a className="tooltip2" href="" onClick={this.handleDeletePost}><span className="tooltiptext">Delete post</span><i className="material-icons">delete</i></a>
</div>
<div><input type="text" name="postid" style={{display:'none'}} ref={input => this.postid = input} value={post.id}/></div>
</div>
</div>
</div>
And then click Home my JavaScript that I declared earlier is no longer accessible.
What could have gone wrong?
I tried to declare my JS on my component using Helmet still to no avail.
<Helmet>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/readable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</Helmet>
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.?