React Dom is covering the entire page - javascript

I created a code to display the colors inside of an array, "d", and it's working quite fine. I used document.getElementById to display the colors.
Here's the problem:
The only thing displaying on screen is the list of colors. I created like four divs with different colours to use for something else but that isn't showing again.
If I remove the imported react dom and the getElementById code, all my blueDv, PinkDv div etc., come back up.
Is there a way to display the result of the array and still show the divs?
Where am I getting it wrong? Why is the document.getElementById covering the entire page?
import React from "react";
import REACTDOM from "react-dom";
import "./JsShuffle.css";
const JsShuffle = () => {
let d = ['Blue', 'pink', 'green', 'yellow'];
REACTDOM.render(d, document.getElementById('root'));
return (
<div className= "jsshuffle">
<div className= "blueDv">
</div>
<div className= "pinkDv">
</div>
<div className= "greenDv">
</div>
<div className= "yellowDv">
<div id="root"></div>
</div>
</div>
);
}
export default JsShuffle;

Related

how to get the clicked element when clicked in ReactJS when using map?

I am mapping 'MemeCard.js' elements inside the 'Home.js' using ReactJs 'map' function.
In Home.js element mapping is done like this
memes = ["url1","url2","url3","url4"];
return (
<div className="container my-3">
<div className="row">
{memes.map((meme, index) => {
return (
<div className="col-xl-4 my-5">
<MemeCard imgurl={meme} index={index} />
</div>
);
})}
</div>
</div>
);
My MemeCard element is
import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';
export default function MemeCard(props) {
function likeBtnClicked(index){
document.getElementById("heartIMG").setAttribute("src",blueHeart);
console.log(index);
}
return (
<div className={MemeCSS.box}>
<img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
<div className={MemeCSS.divbutton}>
<img className={MemeCSS.shareImg} src={Share} alt="share" />
<img
id="heartIMG"
className={MemeCSS.likeImg}
onClick={()=>{likeBtnClicked(props.index);}}
src={whiteHeart}
alt="like"
/>
</div>
</div>
);
}
What I want to do is :
Change the 'likeImage' from 'whiteHeart' image to 'blueHeart' (both of which I have imported), when clicked on the 'whiteHeart' image using the 'onClick'.
But, no matter which 'MemeCard's 'whiteHeart' image I click, the code is changing only the image of the first item to 'blueHeart'. Because it is getting only the "document.getElementById("heartIMG")" of the first item everytime.
But the index is printing the index of the correct item(which is clicked).
Can someone tell me how to solve this problem?
Yous should add a dyanmic function which works for each component indvidually.:
// MemeCard.js
import React from 'react';
import MemeCSS from './MemeCard.module.css';
import whiteHeart from '../images/bordered_heart.png';
import blueHeart from '../images/blue_heart.png';
import Share from '../images/share.png';
export default function MemeCard(props) {
function likeBtnClicked(event){
const element = event.currentTarget;
element.setAttribute("src",blueHeart);
}
return (
<div className={MemeCSS.box}>
<img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" />
<div className={MemeCSS.divbutton}>
<img className={MemeCSS.shareImg} src={Share} alt="share" />
<img
id="heartIMG"
className={MemeCSS.likeImg}
onClick={likeBtnClicked}
src={whiteHeart}
alt="like"
/>
</div>
</div>
);
Now all components has there own function.
This will help you ...
https://upmostly.com/tutorials/react-onclick-event-handling-with-examples
or you can use
React JS onClick event handler

Make react-tooltip always visible

I have following code:
// App.js
useEffect(() => {
ReactTooltip.rebuild()
}, [])
// index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="tooltip" data-for="tooltipStep" data-tip="tooltipStep_1"></div>
<div id="root"></div>
</body>
// MyTooltip.js
import ReactTooltip from "react-tooltip";
import ReactDOM from "react-dom";
import React from "react";
import classes from './MyTooltip.module.css';
const MyTooltip = (props) =>
<React.Fragment>
{
ReactDOM.createPortal(
<div>
<div className={classes.backdrop} />
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>
</div>
,
document.getElementById("tooltip")
)}
</React.Fragment>
export default MyTooltip;
The problem is that when I unmaximize the browser window, tooltip disappears when cursor is positioned beyond the browser window. Also tooltip disappears if scrolling occurs. I have to point cursor to the navigation bar and then back to the webapp for tooltip to show up again after scrolling.
How could I make react-tooltip always visible no matter what?
Thanks in advance.
React tooltip comes with different attribute that includes scrollHide (default is true) and resizeHide (default is true).
You can just set them to false;
<ReactTooltip
id={props.id}
type="dark"
place={props.place}
scrollHide={false}
resizeHide={false}
className={classes.tooltip}
>
<span>{props.text}</span>
</ReactTooltip>

Why is my wrapper disrupting the CSS of the content it is wrapping?

When I add a wrapper to this jsx, it breaks the existing CSS and I can't determine why. The page CSS is proper at first, but this wrapper causes the menu-item s to shrink. What am I missing here?
Before:
import React from "react";
import { withRouter } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, history, match }) => (
<div className={`${size} menu-item`}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()} </h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
);
export default withRouter(MenuItem);
After:
import React from "react";
import { withRouter } from "react-router-dom";
import "./menu-item.styles.scss";
const MenuItem = ({ title, imageUrl, size, history, match }) => (
<a href="https://www.google.com">
<div className={`${size} menu-item`}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`,
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()} </h1>
<span className="subtitle">SHOP NOW</span>
</div>
</div>
</a>
);
export default withRouter(MenuItem);
The browsers generally add their own style to the anchor tag, and the tag also inherits some style from the body and whatnot. What you need to do is make apply some CSS of your own to the anchor to make sure it's always extended like a wrapper.
Maybe something like this should help.
#mainMenu a {
display: inline-block;
width: 100%; //depending if your menu direction is in rows or columns
}
If your menu item also has some padding, I suggest moving that padding to the anchor as well.
Anyhow, you can always toy around with the CSS applied to your anchor tag if you inspect the element (Right Click -> Inspect). Let me know if you have more questions about this.

Materialize Css Parallex is not a function

I am trying to use the parallax within a react component. I have gotten this to work in the past. This is a MeteorJs project as well
I get a console error:
$(...).parallax is not a function
My component:
import React from 'react';
import $ from 'jquery';
export default class Index extends React.Component{
render(){
$(document).ready(function(){
$('.parallax').parallax();
});
return(
<div className="container">
<div className="parallax-container">
<div className="parallax"><img src="images/parallax1.jpg"/></div>
</div>
<div className="section white">
<div className="row container">
<h2 className="header">Parallax</h2>
<p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background
content or image in this case, is moved at a different speed than the foreground content while
scrolling.</p>
</div>
</div>
<div className="parallax-container">
<div className="parallax"><img src="images/parallax2.jpg"/></div>
</div>
</div>
)
}
}
My client main.js file:
import '../imports/startup/client/routes';
import '../node_modules/materialize-css/dist/js/materialize.min';
import '../node_modules/materialize-css/js/parallax';
The error message is telling you that .parallax() isn't a function in this line of code:
``
$('.parallax').parallax();
```
Which means that $('.parallax') is returning an object (usually a html element). It is not surprising that .parallax() is not a function, because it's just a html element.
Looking at the documentation, I think you are missing this initialisation code:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems, options); });

Render different html depending on index of object in react

In my meteor project I have a collection called auctions. Using react I wish to render 3 columns of this auctions with unlimited number of rows. To accomplish this I thought it would be possible to send the index of the object but I have no idea how to do this. Another problem is that it shows an error with the html code since I'm not closing the 'div' tag.
This is my App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { withTracker } from 'meteor/react-meteor-data';
import { Auctions } from '../api/auctions.js';
import Auction from './Auction.js';
//App component - represents the whole app
class App extends Component {
renderAuctions() {
return this.props.auctions.map((auction, index) => (
<Auction key={auction._id} auction={auction} index={index} />
));
}
render() {
return (
<div className="container section">
<div className="row">
{this.renderAuctions()}
</div>
</div>
);
}
}
export default withTracker(() => {
return {
auctions: Auctions.find({}).fetch(),
};
})(App);
And my Auction.js:
import React, { Component } from 'react';
//Task component - resepresnts a single todo item
export default class Auction extends Component {
render() {
if(index % 3 === 0) {
return (
</div> /* Shows an erros here because of closing tag*/
<div className="row">
<div className="col s4 ">
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
);
} else {
<div className="col s4">
<h1>Brincoooo</h1>
<div className="card">
<div className="card-image">
<img src="images/logo.png" />
</div>
<div className="card-content">
<span className="card-title">
{this.props.auction.auctionName}
</span>
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div className="card-action">
This is a link
</div>
</div>
</div>
}
}
}
Any time you return HTML from a render function it needs to be self contained and have balanced tags. That's the way React works, and why it's giving you an error.
Instead of trying to group 3 auctions at a time, you could think of using flexbox instead. With flexbox you simply render all of your auctions, and it looks after the wrapping automatically for you. Users with wider screens will see more than 3 columns, and users on mobile will see probably one when in portrait mode.
If you want to learn about flexbox, there is a cute tutorial here: https://flexboxfroggy.com/ There are plenty of tutorials around if you don't like that one, such as this: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
I'll let you do the work from here

Categories