kandi background
Explore Kits

light-bootstrap-dashboard | Light Bootstrap Dashboard is an admin dashboard template | Dashboard library

 by   creativetimofficial CSS Version: v1.3 License: MIT

 by   creativetimofficial CSS Version: v1.3 License: MIT

kandi X-RAY | light-bootstrap-dashboard Summary

light-bootstrap-dashboard is a CSS library typically used in Analytics, Dashboard, React, Bootstrap applications. light-bootstrap-dashboard has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 4 and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM. The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard contains multiple handpicked and optimised plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customisation of this product. It comes with 6 filter colors for the sidebar (black, azure,green,orange,red,purple) and an option to have a background image.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • light-bootstrap-dashboard has a medium active ecosystem.
  • It has 1331 star(s) with 580 fork(s). There are 90 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 24 open issues and 26 have been closed. On average issues are closed in 217 days. There are 1 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of light-bootstrap-dashboard is v1.3
This Library - Support
Best in #Dashboard
Average in #Dashboard
This Library - Support
Best in #Dashboard
Average in #Dashboard

quality kandi Quality

  • light-bootstrap-dashboard has no bugs reported.
This Library - Quality
Best in #Dashboard
Average in #Dashboard
This Library - Quality
Best in #Dashboard
Average in #Dashboard

securitySecurity

  • light-bootstrap-dashboard has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
This Library - Security
Best in #Dashboard
Average in #Dashboard
This Library - Security
Best in #Dashboard
Average in #Dashboard

license License

  • light-bootstrap-dashboard is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
This Library - License
Best in #Dashboard
Average in #Dashboard
This Library - License
Best in #Dashboard
Average in #Dashboard

buildReuse

  • light-bootstrap-dashboard releases are available to install and integrate.
  • Installation instructions, examples and code snippets are available.
This Library - Reuse
Best in #Dashboard
Average in #Dashboard
This Library - Reuse
Best in #Dashboard
Average in #Dashboard
Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here

Get all kandi verified functions for this library.

Get all kandi verified functions for this library.

light-bootstrap-dashboard Key Features

Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple.

light-bootstrap-dashboard Examples and Code Snippets

Community Discussions

Trending Discussions on light-bootstrap-dashboard
  • How to redirect to another view in React
  • How do I change the default behavior of my dropdown menus in bootstrap 4?
  • How to Autocomplete in ct-vue-light-bootstrap-dashboard template form
  • How can I stop datatables columns from being responsive?
  • Not able to render react component in react router
  • React - match.params is empty after sending the props from Router
  • React router with Admin Layout
  • React with Webpack + Jquery + bootstrap
  • ChartJS doesn't draw the chart
  • No such template "xxx" in Golang HTML Web Apps
Trending Discussions on light-bootstrap-dashboard

QUESTION

How to redirect to another view in React

Asked 2020-Jun-26 at 09:10

Im developing an app where I need to login and after click tha Login button I need to redirect to another view that is in another layout, I've tried using this.props.history.push("/Inicio") to redirect when the Login is succesful. In this case this is the path.

{
path: "/Inicio",
name: "Inicio",
component: Inicio,
layout: "/admin"
},

This is the entire code

import React, { Component } from "react";
import {
   Grid,
   Col
} from "react-bootstrap";

import { Card } from "components/Card/Card.jsx";
import { FormInputs } from "components/FormInputs/FormInputs.jsx";
import Button from "components/CustomButton/CustomButton.jsx";

class Login extends Component {
constructor(props) {
  super(props)
  this.state = {
      users: [],
      user: '',
      pass: '',
      msg: '',
      apiResponse:''
  }
  this.logChange = this.logChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this)
}

handleSubmit(event) {
  event.preventDefault()
  var data = {
    user: this.state.user,
    pass: this.state.pass,
    msg: this.state.msg,
    apiResponse: this.state.apiResponse
  }
  console.log(data)
  fetch("http://localhost:9000/log/Login", {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data)
  }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
  }).then((data) => {
    if(data == "success"){
      console.log(data) 
      this.setState({users: data});
      this.props.history.push("/Inicio");
      window.location.reload();
    }
    else{
      if(data == 'El usuario o la contraseña no coinciden'){
        this.setState({ apiResponse: data })
      }
      
    }
  }).catch(function(err) {
      console.log(err)
  });
  }
  logChange(e) {
  this.setState({[e.target.name]: e.target.value});

  }

render() {
return (
  <div className="content">
    <p class="col-md-4"></p>
    <Grid >
        <Col md={5}>
          <Card
          
            title="Login"
            content={
              <form method='POST' onSubmit= {this.handleSubmit}>
                <p class="col-md-2"></p>
                <FormInputs
                  ncols={["col-md-7"]}
                  properties={[
                    {
                      label: "Usuario",
                      type: "text",
                      bsClass: "form-control",
                      placeholder: "Usuario",
                      maxlength: 20 ,
                      name: "user",
                      onChange: this.logChange
                    }
                  ]}
                />
                <p class="col-md-2"></p>
                <FormInputs
                  ncols={["col-md-7"]}
                  properties={[
                    {
                      label: "Contraseña",
                      type: "password",
                      bsClass: "form-control",
                      placeholder: "Contraseña",
                      maxlength: 20,
                      name: "pass",
                      onChange: this.logChange
                    }
                  ]}
                />
                <p >{this.state.apiResponse}</p>
                <br/>
                <br/>
                <Button bsStyle="info" pullRight fill type="submit">
                  Login
                </Button>
                <Button bsStyle="info" pullLeft fill type="submit">
                  Olvide mi Contraseña
                </Button>
                
                
              </form>
            }
          />
        </Col>
    </Grid>
    
 </div>
);
}
}

export default Login;

but in the handleSubmit() everything is working fine except for this.props.history.push("/Inicio") because it doesn't do anything.

The index.js code

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";

import AdminLayout from "layouts/Admin.jsx";
import LoginLayout from "layouts/LoginLayout.jsx";
import EfoodLayout from "layouts/EFoodLayout.jsx";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/login" render={props => <LoginLayout {...props} />} />
        <Route path="/Efood" render={props => <EfoodLayout {...props} />} />
        <Redirect from="/" to="/login/Login" />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

LoginLayout

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import LoginNavbar from "components/Navbars/LoginNavbar";
import Footer from "components/Footer/Footer";


import routes from "routes.js";

class Login extends Component {

getRoutes = routes => {
return routes.map((prop, key) => {
  if (prop.layout === "/login") {
    return (
      <Route
        path={prop.layout + prop.path}
        render={props => (
          <prop.component
            {...props}
            handleClick={this.handleNotificationClick}
          />
        )}
        key={key}
      />
    );
  } else {
    return null;
  }
});
};
getBrandText = path => {
return "Bienvenido a E Food";
};

render() {
 return (
   <div className="wrapper">
      <LoginNavbar 
        brandText={this.getBrandText(this.props.location.pathname)}
        
      />
      <Switch>{this.getRoutes(routes)}</Switch>
      <Footer />
      
   </div>
  );
 }
} 

export default Login;

I hope you can help me, and thanks to everyone who answer. PD: If you need more from my code, please let me know.

ANSWER

Answered 2020-Jun-26 at 07:29

Are you using react-router-dom to handle your routing ? If so, you can use the hooks to navigate.

import { useHistory } from "react-router-dom";
...
const history = useHistory()

...
history.push('/Inicio')

Note that this will only work with React version >= 16.8

The reason why your code is not working is because of the bindings.

When using this.props.history.push("/Inicio"), this refers to the function you're in, not to the Component history.

If you want to keep your code that way, you can simply turn your function into an arrow function:


  .then((data) => {
      if(data == "success"){
        console.log(data) 
        self.setState({users: data});
        **this.props.history.push("/Inicio")** // now this will be correct
        **window.location.reload();** // no need, react handles the reload
      }
      else{
        if(data == 'El usuario o la contraseña no coinciden'){
          self.setState({ apiResponse: data })
        }
        
      }

Although, I'd strongly advise using the latest features of react (check the hooks, it's really useful).

Source https://stackoverflow.com/questions/62589869

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install light-bootstrap-dashboard

Download from Github. Download from Creative Tim. Clone the repo: git clone https://github.com/creativetimofficial/light-bootstrap-dashboard.git.

Support

Live PreviewVideo TutorialLight Bootstrap Dashboard PRO (from $39)

Find more information at:

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases
Explore Kits

Save this library and start creating your kit

Clone
  • https://github.com/creativetimofficial/light-bootstrap-dashboard.git

  • gh repo clone creativetimofficial/light-bootstrap-dashboard

  • git@github.com:creativetimofficial/light-bootstrap-dashboard.git

Share this Page

share link
Reuse Pre-built Kits with light-bootstrap-dashboard
Consider Popular Dashboard Libraries
Try Top Libraries by creativetimofficial
Compare Dashboard Libraries with Highest Support
Compare Dashboard Libraries with Highest Quality
Compare Dashboard Libraries with Highest Security
Compare Dashboard Libraries with Permissive License
Compare Dashboard Libraries with Highest Reuse
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases
Explore Kits

Save this library and start creating your kit