I am trying to reproduce this cube inside of a webpage I am making using react (i am very new to react, so this question might be stupid)
https://codepen.io/jordizle/pen/haIdo/
So, I created a component, which contains the HTML structure for the cube.
class Cube extends Component {
render() {
return (
<div className="cube">
<div id="wrapper">
<div class="viewport">
<div class="cube">
<div class="side">
<div class="cube-image">1</div>
</div>
<div class="side">
<div class="cube-image">2</div>
</div>
<div class="side">
<div class="cube-image">3</div>
</div>
<div class="side">
<div class="cube-image">4</div>
</div>
<div class="side">
<div class="cube-image">5</div>
</div>
<div class="side">
<div class="cube-image active">6</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
Then, I simply added the CSS from the above website to a separate file, which I imported, like so:
import './ProductPage.css';
(see link above for css. The CSS is just copy pasted).
Finally, I created another component, which should render the cube, when it itself is rendered:
class NewProductPage extends Component {
constructor(props) {
super(props);
this.state = {
img: null,
};
this.onDrop = this.onDrop.bind(this);
}
onDrop(acceptedFiles){
this.setState({
img: acceptedFiles[0].preview,
})
}
render(){
return (
<div>
<Cube />
<div className="DropPicBox">
<DropZone onDrop={this.onDrop}>
{this.state.img ?
<div>
<img className="PicBox" src={this.state.img} />
</div>
: null}
</DropZone>
</div>
</div>
);
}
}
This is rendered, but incorrectly:
My question is: is there something about the way react applies CSS that would change the way the cube looks? I used jfiddle to model this same cube using HTML and CSS from this website: https://codepen.io/jordizle/pen/haIdo/
And the cube looked correctly:
https://jsfiddle.net/jfj3muug/#&togetherjs=q2dv8HIMza
In JSX, to specify the class of an element, you have to use className, not class. E.g.:
<div className="foo">...</div>
instead of
<div class="foo">...</div>
You're doing that in some places, but Cube (your first codeblock) has class in several places.
Related
I have a parent comp which content should be displayd conditionally
when the userinput variable is false
The <div class="parent">
should be removed and the PopUp component displayed
I tried to use `v-if` but dont know how to remove the entire div with it elements
I could only change single elements with v-if else
parent comp
<template>
<div>
<h1>header</h1>
<div class="parent">
<h2>infos</h2>
<button>x</button>
</div>
</div>
</template>
<script>
import PopUp from './PopUp.vue';
export default {
data() {
return {
userinput: true,
}
}
}
</script>
child component - PopUp
<template>
<div>
<button>x</button>
<p>errorMessage</p>
</div>
</template>
Add v-if="userinput" doesn't work ?
If I understand what you want, you should have something like this :
// parent comp
<template>
<div>
<h1>header</h1>
<div v-if="userinput" class="parent">
<h2>infos</h2>
<button>x</button>
</div>
<PopUp v-else/>
</div>
</template>
Do not hesitate to read the Vue.js documentation
I have this conditional render function ready and it works fine.
render() {
if (this.state.guess === 'guessing') {
return (
<div style={rightBarStyle.guessingGameStyle}>
<div style={rightBarStyle.guessingGameStyle.quizBlockStyle}>
<h3> Who is this? </h3>
<ul className={'optionsContainer'}>
<PeopleNames onClick={(e) => this.handleClick(e)}/>
</ul>
</div>
<div style={rightBarStyle.guessingGameStyle.imgBlockStyle}>
<img style={rightBarStyle.guessingGameStyle.imgBlockStyle.image} src={imageLink}
alt={"profile pic"}/>
</div>
</div>
)
}
else if (this.state.guess === 'correct') {
return (
<div style={rightBarStyle.guessingGameStyle}>
<div style={rightBarStyle.guessingGameStyle.quizBlockStyle}>
<FadeIn>
<p className={['details','title'].join(' ')}>{name} </p>
<p className={['details','designation'].join(' ')}>Software Developer</p>
<p className={['details','team'].join(' ')}>Software Department</p>
</FadeIn>
</div>
<div style={rightBarStyle.guessingGameStyle.imgBlockStyle}>
<img style={rightBarStyle.guessingGameStyle.imgBlockStyle.image} src={imageLink}
alt={"profile pic"}/>
</div>
</div>
)
}
else return <div></div>
}
Issues:
I need to apply a transition whenever new DOM elements are rendered on state change. I read about CSSTransitions but they work on child elements.
Here is the sandbox link on which I want to have a smooth transition onclick of the button: SandBox
I have to include that last 'else' otherwise it throws an error that render didn't find anything to be rendered on DOM. It works but is there a workaround for this? It does not look neat.
I'm trying to use react-burger-menu with bootstrap 3 grids. I want to have a row across the top of my page that has the burger menu in the upper left corner with the remainder of the row containing a page title, so I wrote:
import React from 'react'
import { slide as ReactMenu } from 'react-burger-menu'
export default class Header extends React.Component {
showAbout(event) {
event.preventDefault()
console.log("Version 0.0.1")
}
render() {
return(
<div className="container">
<div className="row">
<div className="col-lg-2">
<ReactMenu>
<a id="View" className="menu-item" href="/">View</a>
<a onClick={ this.showAbout } className="menu-item--small" href="">About</a>
</ReactMenu>
</div>
<div className="col-lg-10 h1">Permit and License Documents</div>
</div>
</div>
)
}
}
But what I get is:
I thought I would use bootstrap grid to layout the horizontal spacing, but it is not working. Is there a way to do this, or should I use something other than bootstrap Grids? TIA.
It looks like that h1 class is applying some property that's overriding the col behavior. It is also possible that you need to add the col class in addition to the col-lg-2 such that <div className='col col-lg-2'
Try:
<div className="container">
<div className="row">
<div className="col col-lg-2">
<ReactMenu>
<a id="View" className="menu-item" href="/">View</a>
<a onClick={ this.showAbout } className="menu-item--small" href="">About</a>
</ReactMenu>
</div>
// change here:
<div className="col col-lg-10">
<h1>Permit and License Documents</h1>
</div>
</div>
</div>
Finally, make sure that you're col size is correct. try making it from md up. Example: <div className='col-md-2'></div>
I am adopting React JS with template I use, http://templines.rocks//html/sokolcov/futurico/index-1.html
I have header that consist of Home and Contact. In my Home, I implemented slider that holds content right below the header. I coded it in my BannerComponent.
import React from 'react';
import bannerJSON from '../../../config/banner.json'
const banners = bannerJSON.banners.map((banner, index)=>{
return (
<div className="home-slide" key= {index}>
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 text-center">
<div className="b-home-slider-content" >
<h2 className="main-heading">
{banner.title}
</h2>
<div className="home-slider-text">
{banner.content}
</div>
</div>
</div>
</div>
</div>
</div>
)
})
class BannerComponent extends React.Component {
render(){
return (
<div className="b-layer-big">
<div className="layer-big-bg page-layer-big-bg">
<div className="layer-content-big">
<div className="b-home-slider-holder wow slideInUp">
<div className="b-home-slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "fade": true, "speed": 1000, "autoplay": true}'>
{banners}
</div>
<div className="b-slick-arrows">
<div className="custom-slideshow-controls">
<span id="home-slider-prev" className="slick-arrows-prev arrow-transparent"><i className="fa fa-angle-left" aria-hidden="true"></i></span>
<span id="home-slider-next" className="slick-arrows-next arrow-transparent"><i className="fa fa-angle-right" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
BannerComponent.defaultProps = {
};
export default BannerComponent;
Home.js that actually render the Banner component
import React from 'react';
import Banner from './components/Banner'
import Step from './components/Step'
import Pricing from './components/Pricing'
export default class Homepage extends React.Component {
render(){
return(
<div className="b-page-content with-layer-bg">
<Banner/>
<div className="b-homepage-content">
<div className="b-layer-main">
<div className="page-arrow">
<i className="fa fa-angle-down" aria-hidden="true"></i>
</div>
<Step/>
<Pricing/>
</div>
</div>
</div>
)
}
}
The slider works perfectly when I refresh the page. However, when I change the page content by clicking to Contact and then click back to Home, the content in slider dissapear. In inspect F12, I still able see the content appears in element tab. The content is just invisible on the page and the slider won't slide anymore. I am suspecting that it is React JS stuff that not re-render it.
The slider used by Futirico is some sort of http://kenwheeler.github.io/slick/ if not mistaken.
Slick is a jQuery plugin. It doesn't mix well with React.js. It's likely that React is changing DOM elements that Slick has attached event listeners to. If the event listeners are gone, Slick.js will just stop working.
There are alternative carousel components that are made for React.js. Here's one: https://github.com/akiran/react-slick
I am working on MERN.io project.
I am using React.js component Dropdown.
But it doesn't contain its style and css and no-stying at all.
...
import Dropdown from 'react-dropdown';
import styles from './../../../../assets/css/style.css';
class OrderCreateWidget extends Component {
...
render() {
...
return(
<div>
<div className={styles["row"]}>
<div className={styles["col-lg-12"]}>
<div className={styles["card"]}>
<div className={styles["card-header"]}>
Place Order
</div>
<div className={styles["card-block"]}>
<h5>*NOTICE* Please make sure that you have "Followers" enabled on your profile so that the share button appears for non-friends too, that will enable us to promote your post.</h5>
<br/>
<div className={styles["row"]}>
<div className={styles["col-lg-7"]}>
<div className={`${styles["row"]} ${styles["form-group"]}`}>
<label className={styles["col-md-3"]}>Service</label>
<Dropdown options={options} onChange={this._onSericeSelect} value='fb_likes1' placeholder="Select an option" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
...
}
this is the screenshot how dropdown works, currently.
I wishes great help from you.
Thank you.
import 'react-dropdown/style.css';