We Keep Coding

How do I navigate to another screen in React js using href attribute?

I'm trying link a button to another screen within my application using href. For some reason when press the href it takes me to the top of the same screen and to the screen I want to go.
How would i do that?
Here is my screen that has a href I'm using to link to another screen
import React, { Component } from 'react';
import CarDetail from './carDetail';
export class Services extends Component {
render() {
return (
<a
href="./carDetail"
title="Car Detailing"
data-lightbox-gallery="gallery1">
<div className="hover-text">
<h4>Car Detailing</h4>
</div>
<img
src="img/portfolio/carSmall.jpg"
className="img-responsive"
alt="Car Detail"
/>
</a>
);
}
}
And here is my screen i want the user to go to when they press the href
import React from "react";
export default function CarDetail() {
return (
<header id="header">
<div className="intro">
<div className="col-md-8 col-md-offset-2 intro-text">
<h1>We offer a wide assortment of options for Mobile Detailing </h1>
<p>How it Works</p>
</div>
</div>
</header>
);
}

How do I get the react-burger-menu to work with bootstrap grid?

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>

How do I initialize a semantic-ui click event in Meteor.js?

I'm very new to meteor/semantic/javascript in general so I apologize if this question seems a little to rushed, but I seriously cannot figure this out.
An example of a click event I am trying to initialize, I have a semantic-ui dropdown menu. With what I have now, I get this error:
=> Meteor server restarted
Errors prevented startup:
While processing files with ecmascript (for target web.browser):
client/main.js:18:4: Unexpected token (18:4)
Your application has errors. Waiting for file change.
Here's what I have, I know it's pretty messy. I'll work on that later.
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import '/main.html';
import '/templates/cards.html';
import '../lib/collections.js';
Template.cards.helpers({
cards: function() {
return Cards.find();
}
});
Template.card.events({
$('.ui.dropdown')
.dropdown()
;
});
<template name="card">
<div class="three wide column">
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">
{{header}}
<div class="ui dropdown right floated">
<i class=" small grey ellipsis vertical icon"></i>
<div class="menu">
<div class="item">Edit</div>
</div>
</div>
</div>
<div class="description">
{{desc}}
</div>
</div>
<div class="extra content">
<button class="ui fluid blue icon button"><i class="map icon"></i></button>
</div>
</div>
</div>
</div>
</template>

You've messed up with Template.card.events, you don't need it at all here.
It should be like this instead:
Template.card.onCreated(function() {
$('.ui.dropdown').dropdown();
});

React.js include css

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';

Online Example (CSS of a Cube) inside React

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.