Converting Ecommerce template to React componenet

Converting Ecommerce template to React componenet - javascript

I am following and reading all guides to convert template(html, css, js) to react component but without any result. This is an eccommerce project in react, redux and node. All I want it to add responsive template that user can use from mobile too with good UI.
How to convert it? In index.html of React project I linked to .css and js events files
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
//import { Navbar, Nav, Container } from 'react-bootstrap';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import { Container } from 'react-bootstrap'
import { NavDropdown } from 'react-bootstrap'
import Logo from '../assets/images/divano-logo.svg'
const Header = () => {
const dispatch = useDispatch()
const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin
const logoutHandler = () => {
dispatch(logout())
}
return (
<>
<nav>
<div className='container'>
<a href='index.html' className='logo'>
<img src={Logo} alt='' width='130' height='55' />
</a>
<div className='navigation navigation-top clearfix'>
<ul>
<li>
<a href='#' className='open-login'>
<i className='icon icon-user'></i>
</a>
</li>
<li>
<a href='#' className='open-search'>
<i className='icon icon-magnifier'></i>
</a>
</li>
<li>
<a href='#' className='open-cart'>
<i className='icon icon-cart'></i> <span>4</span>
</a>
</li>
</ul>
</div>
<div className='navigation navigation-main'>
<a href='javascript:void(0);' className='open-login'>
<i className='icon icon-user'></i>
</a>
<a href='#' className='open-search'>
<i className='icon icon-magnifier'></i>
</a>
<a href='#' className='open-cart'>
<i className='icon icon-cart'></i> <span>4</span>
</a>
<a href='#' className='open-menu'>
<i className='icon icon-menu'></i>
</a>
<div className='floating-menu'>
<div className='close-menu-wrapper'>
<span className='close-menu'>
<i className='icon icon-cross'></i>
</span>
</div>
<ul>
<li>
<a href='#'>
Home{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Homepages</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Pages{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Addons</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Blog{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
<ul>
<li className='label'>Blog</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Shop{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
<div className='navbar-dropdown navbar-dropdown-single'>
<div className='navbar-box'>
<div className='box-full'>
<div className='box clearfix'>
</div>
</div>
</div>
</div>
</li>
<li>
<a href='#'>
Checkout{' '}
<span className='open-dropdown'>
<i className='fa fa-angle-down'></i>
</span>
</a>
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div className='search-wrapper'>
<input className='form-control' placeholder='Search' />
<button className='btn btn-outline-dark btn-sm'>Search now</button>
</div>
<div className='login-wrapper'>
<div className='h5'>Sign in</div>
<form>
<div className='form-group'>
<input
type='email'
className='form-control'
id='exampleInputEmail1'
placeholder='Email'
/>
</div>
<div className='form-group'>
<input
type='password'
className='form-control'
id='exampleInputPassword1'
placeholder='Password'
/>
</div>
<div className='form-group'>
<a
href='#forgotpassword'
className='open-popup btn btn-main btn-sm'
>
Forgot password?
</a>
<a
href='#createaccount'
className='open-popup btn btn-main btn-sm'
>
Don't have an account?
</a>
</div>
<button
type='submit'
className='btn btn-block btn-outline-primary'
>
Submit
</button>
</form>
</div>
<div className='cart-wrapper'>
<div className='checkout'>
<div className='clearfix'>
<div className='row'></div>
<hr />
</div>
</div>
</div>
</div>
</nav>
</>
)
}
export default Header

Related

how to use the reusability of components inSide the nextjs

I am using next.js in my pages folder
On the link localhost:3000/accounts
import React from "react";
import Link from "next/link";
const Account = () => {
return (
<div className="row">
<div className="col-md-3">
<ul className="list-group">
<Link className="list-group-item active" href="/accounts/oders"> My order history </Link>
<a className="list-group-item" href="#"> Transactions </a>
<a className="list-group-item" href="#"> Return and refunds </a>
<a className="list-group-item" href="#">Settings </a>
<a className="list-group-item" href="#"> My Selling Items </a>
<a className="list-group-item" href="#"> Received orders </a>
</ul>
<br/>
<a className="btn btn-light btn-block" href="#"> <i className="fa fa-power-off"></i> <span className="text">Log out</span> </a>
</div>
<div className="col-md-8">
{/* Here i want to render the next components */}
</div>
</div>
);
};
export default Account;
When click on the link oreder localhost:3000/accounts/order
<div className="col-md-8">
{/* Here i want to render the next components */}
</div>
I want to render the component here only just like we repeat the navbar and footer by app.js i want to render the account table on every page of the account related link

uncaught in promises in vanilla js

I am making some mapping with moviedb api using innerhtml, the problem i am having is with the Main.appendChild where the appendChild is handle as a property and not as a function. I am having the same issue in the console with the entire main array and i think it might having something to do with the fact that i am declering the main object to a htmlelemnt then to a array. Btw i have given up on this project hence it wasnt worth the extra time that it took
this is kinda of a filler part so excuse me pls.
const API_KEY = "api_key=0a2c754df24f03f4197199045aedf7de";
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const main = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url).then(res => res.json())
.then(data => {
console.log(data.results);
showMovies(data.results);
})
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach(main => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
main.appendChild(movieEl);
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="img/favicon.png" />
<title>Movies - Get Booked Online</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous"
/>
<!-- Bootstrap core CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" /></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"
><i class="fas fa-home"></i> Home</a
>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fas fa-film"></i> Movies</a>
</li>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
data-toggle="dropdown"
href="#"
role="button"
aria-haspopup="true"
aria-expanded="false"
><i class="fas fa-crown"></i> Genre</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Adventure</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Animation</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
</div>
</li>
</ul>
<a class="nav-button" href="movies.html"
><i class="fas fa-newspaper"></i> Latest Movies</a
>
</div>
</nav>
<!-- breadcrumbs -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Movies</li>
</ol>
</nav>
<!-- /breadcrumbs -->
<!-- movie cards -->
<div class="container">
<div class="alert alert-primary" role="alert">
<i class="fas fa-exclamation-circle"></i> The following movies are
currently in theaters.
</div>
<main id ="main">
<div class="row">
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/wCvTSaIQEweNdsU98usvt9re7fq.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Avengers: Infinity War</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
As the Avengers and their allies have continued to protect the
world from threats too large for any one hero to handle, a new
danger has emerged from the cosmic shadows: Thanos.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/to0spRl1CMDvyUbOnbb4fTk3VAd.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Deadpool 2
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.3</a
>
</span>
<p>
Wisecracking mercenary Deadpool battles the evil and powerful
Cable and other bad guys to save a boy's life.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/uxzzxijgPIY7slzFvMotPv8wjKA.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Black Panther
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 7.6</a
>
</span>
<p>
King T'Challa returns home from America to the reclusive,
technologically advanced African nation of Wakanda to serve as
his country's new leader. However, T'Challa soon finds that he
is challenged for the throne by factions within his own country
as well as without.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/jjPJ4s3DWZZvI4vw8Xfi4Vqa1Q8.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>Fifty Shades Freed</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 4.4</a
>
</span>
<p>
A young Silicon Valley tech-titan enlists a veteran surgeon with
a controversial past in starting a hospital with a cutting-edge,
new school approach to medicine.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/vLCogyfQGxVLDC1gqUdNAIkc29L.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Red Sparrow
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="single-movie.html" class="list-meta-item"
><i class="fas fa-star"></i> 6.7</a
>
</span>
<p>
Prima ballerina, Dominika Egorova faces a bleak and uncertain
future after she suffers an injury that ends her career. She
soon turns to Sparrow School, a secret intelligence service that
trains exceptional young people to use their minds and bodies as
weapons.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/30oXQKwibh0uANGMs0Sytw3uN22.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Rampage
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.4</a
>
</span>
<p>
Primatologist Davis Okoye shares an unshakable bond with George,
the extraordinarily intelligent, silverback gorilla who has been
in his care since birth. But a rogue genetic experiment gone
awry mutates this gentle ape into a raging creature of enormous
size.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/pU1ULUq8D3iRxl1fdX2lZIzdHuI.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
>Ready Player One</a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 8.8</a
>
</span>
<p>
When the creator of a popular video game system dies, a virtual
contest is created to compete for his fortune.
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="list mb-2">
<div class="list-header">
<a href="single-movie.html" class="list-header-image">
<img
src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/85R8LMyn9f2Lev2YPBF8Nughrkv.jpg"
/>
</a>
</div>
<div class="list-content">
<h2>
Game Night
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> 6.2</a
>
</span>
<p>
Max and Annie's weekly game night gets kicked up a notch when
Max's brother Brooks arranges a murder mystery party -- complete
with fake thugs and federal agents. So when Brooks gets
kidnapped, it's all supposed to be part of the game.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- /movie cards -->
<br />
<!-- Newsletter -->
<!-- /Newsletter -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item">
About us
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Refunds
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Terms and Privacy
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
Contact
</li>
</ul>
<p class="small mb-4 mb-lg-0">
Omar Ahmad© 2018. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="https://linkedin.com/in/byalk" class="footer-fb">
<i class="fab fa-linkedin fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#" class="footer-tw">
<i class="fab fa-twitter fa-2x fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#" class="footer-in">
<i class="fab fa-instagram fa-2x fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
<script src="script.js"></script>
</body>
</html>

You have two variables named 'main', one is the getElementById and the other is from the forEach loop. Change one and it should work
const BASE_URL = "https://api.themoviedb.org/3";
const API_URL = BASE_URL + "/discover/movie?sort_by=popularity.desc&" + API_KEY;
const IMG_URL = "https://image.tmdb.org/t/p/w500";
const mainEl = document.getElementById("main");
getMovies(API_URL);
function getMovies(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data.results);
showMovies(data.results);
});
}
function showMovies(data) {
main.innerHTML = " ";
data.forEach((main) => {
const { title, vote_average, overview, poster_path } = main;
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<img
src="${IMG_URL + poster_path} alt-""${title}"
/>
</a>
</div>
<div class="list-content">
<h2>
<a href="single-movie.html" class="text-black"
></a
>
</h2>
<span class="list-meta">
<span class="list-meta-item"
><i class="fas fa-clock"></i> 2018</span
>
<a href="#" class="list-meta-item"
><i class="fas fa-star"></i> ${vote_average}</a
>
</span>
<p>
${overview}
</p>
</div>
`;
mainEl.appendChild(movieEl);
});
}
Sandbox Code

In the forEach loop you are declaring each array item as ‘main’.
Therefore main.appendChild() is called upon the array item, not on the HTML element.
Change the item name in the forEach loop to something like ‘movie’, and then ofcourse also in the first line of the loop.

Component local state is not getting State while using collapse

I am new to react.js. Here I have a button, on click of that button one dropdown gets opened.
export default class NewCollapse extends Component {
constructor(props) {
super(props);
this.state = {
quizEnable: false,
viewEnable: false,
uploadEnable: false
}
}
EnableQuiz = () => {
this.setState({
quizEnable: true,
viewEnable: false,
uploadEnable: false
});
}
EnableView = () => {
this.setState({
quizEnable: false,
viewEnable: true,
uploadEnable: false
});
}
EnableUpload = () => {
this.setState({
quizEnable: false,
viewEnable: false,
uploadEnable: true
});
}
render() {
return (
<div class="container">
<div id="mainmenu" class="row">
<div class="list-group panel visible-md visible-lg">
<i class="glyphicon glyphicon-home"></i>
</div>
<div class="list-group panel">
<button href="#menupos1" data-toggle="collapse" data-parent="#mainmenu">Quick Action<span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></button>
<div class="collapse pos-absolute" id="menupos1">
Quiz<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span>
<div class="collapse list-group-submenu" id="submenu1">
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={CreateNewQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Create New</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={ViewQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">View</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">
<img src={EditQuizIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Update</label>
</a>
</div>
View<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span>
<div class="collapse list-group-submenu" id="submenu2">
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
<img src={JobDescriptionIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Job Description</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu2">
<img src={ResumeIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Resume</label>
</a>
</div>
Upload<span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span>
<div class="collapse list-group-submenu" id="submenu3" >
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
<img src={UploadFolderIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Folder</label>
</a>
<a href="#" class="list-group-item sub-sub-item" data-parent="#submenu3">
<img src={UploadResumeIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Resume</label>
</a>
</div>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Download Tracker</label>
</a>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Selection Criteria</label>
</a>
<a href="#" data-toggle="collapse" data-target="#menupos1" class="list-group-item sub-item">
<img src={RemoveIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Remove</label>
</a>
</div>
</div>
</div>
</div>
)
}
}
So, here what I want to do is that there are three buttons, if any of them is collapsed the others should not be. So, I have maintained three states for each of the collapse. Now, state gets changed but when I first click, that time the state is not getting changed.
So, what is it that I am doing wrong?
Can any one help me with this?

Since you're using bootstrap, there is really no easy way for us to change the collapse/show functionality being provided to us. What we can do is work our way around it with some conditional-rendering.
export default class NewCollapse extends React.Component {
constructor(props) {
super(props);
this.state = {
quizEnable: false,
viewEnable: false,
uploadEnable: false
};
}
enableQuiz = () => {
this.setState({
quizEnable: true,
viewEnable: false,
uploadEnable: false
});
};
enableView = () => {
this.setState({
quizEnable: false,
viewEnable: true,
uploadEnable: false
});
};
enableUpload = () => {
this.setState({
quizEnable: false,
viewEnable: false,
uploadEnable: true
});
};
render() {
return (
<div className="container">
<div id="mainmenu" className="row">
<div className="list-group panel visible-md visible-lg">
<a href="/" className="list-group-item">
<i className="glyphicon glyphicon-home" />
</a>
</div>
<div className="list-group panel">
<button
href="#menupos1"
data-toggle="collapse"
data-parent="#mainmenu"
>
Quick Action
<span className="menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</button>
<div className="collapse pos-absolute" id="menupos1">
<span
href="#submenu1"
onClick={this.enableQuiz}
className={
this.state.quizEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu1"
aria-expanded={this.state.quizEnable}
>
Quiz
<span class=" menu-ico-collapse">
<i class="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.quizEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu1"
>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={CreateNewQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Create New</label>
</a>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={ViewQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">View</label>
</a>
<a
href="#"
class="list-group-item sub-sub-item"
data-parent="#submenu1"
>
<img
src={EditQuizIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Update</label>
</a>
</div>
<span
href="#submenu2"
onClick={this.enableView}
className={
this.state.viewEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu2"
aria-expanded={this.state.viewEnable}
>
View
<span className=" menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.viewEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu2"
>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu2"
>
<img
src={{JobDescriptionIcon}}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Job Description</label>
</a>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu2"
>
<img
src={ResumeIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Resume</label>
</a>
</div>
<span
href="#submenu3"
onClick={this.enableUpload}
className={
this.state.uploadEnable
? "list-group-item sub-item"
: "list-group-item sub-item collapsed"
}
data-toggle="collapse"
data-parent="#submenu3"
aria-expanded={this.state.uploadEnable}
>
Upload
<span className=" menu-ico-collapse">
<i className="glyphicon glyphicon-chevron-down" />
</span>
</span>
<div
className={
this.state.uploadEnable
? "list-group-submenu collapse show"
: "collapse list-group-submenu"
}
id="submenu3"
>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu3"
>
<img
src={UploadFolderIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Folder</label>
</a>
<a
href="#"
className="list-group-item sub-sub-item"
data-parent="#submenu3"
>
<img
src={UploadResumeIcon}
className="img-thumbnail menu-icons"
/>
<label className="list-component">Resume</label>
</a>
</div>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={DownloadTrackerIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Download Tracker</label>
</a>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={SelectionCriteriaIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Selection Criteria</label>
</a>
<a
href="#"
data-toggle="collapse"
data-target="#menupos1"
className="list-group-item sub-item"
>
<img src={RemoveIcon} className="img-thumbnail menu-icons" />
<label className="list-component">Remove</label>
</a>
</div>
</div>
</div>
</div>
);
}
}

Sorting li elements by class? jQuery / Javascript

I have multiple li rows like this
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i></span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i></span>
</div>
</a>
</div>
</li>
</ol>
I want to sort all the li rows by the span class "Status_online".
is this possible?

UPDATE
You can use a combination of closest() to find the each .Record_row that is an ancestor of each .Status_online. Then use .each() on each online .Record_row and use .before() to place them before the first .Record_row. In the Snippet notice that each item maintains it's content and ordered from the earliest to the current.
$(function() {
var online = $('.Status_online').closest('.Record_row');
var first = $('.Record_row')[0];
online.each(function() {
$(first).before(this);
});
});
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort</title>
</head>
<body>
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
</div>
</a>
</div>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var online = $('.Status_online').closest('.Record_row');
var first = $('.Record_row')[0];
online.each(function() {
$(first).before(this);
});
});
</script>
</body>
</html>
OLD
One of your tags is jQuery UI so I'm assuming that you are using it. You can you .sortable() method:
$('.DataList_row').sortable();
This is drag and drop, and I posted before you had commented further details of your need for this sorting to be dynamic...So standby...
SNIPPET
$('.DataList_row').sortable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.6.2/css/font-awesome.min.css">
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE</span>
</div>
</a>
</div>
</li>
</ol>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sort</title>
</head>
<body>
<ol class="DataList_row">
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE1</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE2</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE3</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE4</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_offline"><i class="fa fa-circle"></i>OFFLINE5</span>
</div>
</a>
</div>
</li>
<li class="Record_row">
<div class="Item_main">
<a href="#" class="arrow_box">
<div class="status">
<span class="Status_online"><i class="fa fa-circle"></i>ONLINE4</span>
</div>
</a>
</div>
</li>
</ol>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var olElement = $('.DataList_row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
console.log(sortedAttributes);
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
var clClass = cl.startsWith('ONLINE')?'online':'offline'
liHtml += '<li class="Record_row"><div class="Item_main"><div class="status"><span class="Status_' + clClass + '"><i class="fa fa-circle"></i>' + cl + '</span></div></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.
});
</script>
</body>
</html>
Here is how you can do it:
var olElement = $('.DataList_Row');
var sortedAttributes = $('.status span').map(function() { return $(this).text(); }).sort(); //This returns all the class statuses
olElement.empty(); //Remove all li elements
var liHtml = '';
$(sortedAttributes).each(function(idx, cl){
liHtml += '<li class="Record_row"><div class="Item_main"><div class="status"><span class="Status_' + cl.toLowerCase() + '"><i class="fa fa-circle"></i>' + cl + '</span></div></div></li>';
});
olElement.append(liHtml); //Re-add all the elements that are sorted.

i have a bootstrap left side menu ..but when i click the menu items i want to dispaly content from particular nav item on the same page

<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#" id="navitem1" data-content="content-wrap1 ">
<i class="glyphicon glyphicon-user"></i>
View Profile </a>
</li>
<li class="active">
<a href="#" id="navitem2" data-content="content-wrap2">
<i class="glyphicon glyphicon-"></i>
Account Settings </a>
</li>
<li class="active">
<a href="#" id="navitem3" data-content="content-wrap3">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li class="active">
<a href="#" id="navitem4" data-content="content-wrap4">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
<div id="content-wrap1" class="content">Edit Profile Content goes here Either it may form or what ever </div>
<div id="content-wrap2" class="content">Account settings</div>
<div id="content-wrap3" class="content">Invoices</div>
<div id="content-wrap4" class="content">Credit card info</div>
</div>
</div>
</div>
</div>
<br>
<br>

Develop Reference

JavaScript is the programming language of the Web.

Converting Ecommerce template to React componenet - javascript

Related

how to use the reusability of components inSide the nextjs

uncaught in promises in vanilla js

Component local state is not getting State while using collapse

Sorting li elements by class? jQuery / Javascript

i have a bootstrap left side menu ..but when i click the menu items i want to dispaly content from particular nav item on the same page

Categories

Resources