Posts

Showing posts with the label react-router

New component in Navbar, React

Image
Clash Royale CLAN TAG #URR8PPP New component in Navbar, React I'm working on a site where users can draw on an empty canvas ( doodle component ). I want to create a sidebar that will have a '+' link that a user can click on to create a new doodle component or folder that will house multiple components. Ultimately, I would like a user to have folders and and subfolders of their doodles. I would like the file structure to mimic that of the screenshot below. What would be the best way of going about this. I am considering using react router to accomplish this but was wondering if there are alternatives out there that I may be missing? Any suggestions will be appreciated. Thanks. doodle component doodle component If you want the user to go back and forth between doodles, you could use router. Otherwise you could just use the component's state to clean the current doodle and start with a new one. A bit more info would be great to get a bet...

Alternatives to the Query-string managing state

Image
Clash Royale CLAN TAG #URR8PPP Alternatives to the Query-string managing state We're using React redux, which is fantastic. However, the moment someone refreshes their browser we lose the Redux store and as a result the application breaks or needs to redirect back to the 'start'. We are using the Query-string to manage this, but I have been told Management this is 'Ugly' and we should find an alternate place to hold this information and remove it from the URL. My understanding is we could use a number of things; Cookies, local storage, session storage etc. However, I don't know which is the best to use. We're essentially just looking for somewhere to move the information contained in the URL. E.G. https://url.com?querystring=12345&non-sensitive-id=2242 Redux persist exists. – Li357 11 mins ago ...

object can't get method or property 'getCars'

Image
Clash Royale CLAN TAG #URR8PPP object can't get method or property 'getCars' i'm working on react-redux intermidiate..but i don't know what's going wrong on this project hera i have creacted the searchbar for getting car details..and the file is created as 'search.js'...you can see here.. search.js import React, { Component } from 'react'; import { connect } from 'react-redux'; import { getCars } from '../actions'; import { bindActionCreators } from 'redux'; class Search extends Component{ constructor(props){ super(props); this.state = { keyword:'' } } searchCars = (event) => { event.preventDefault(); this.props.getCars(this.state.keyword) } handleChange = (event) => { this.setState({ keyword:event.target.value }) } componentDidMount(){ console.log...

Conditional Routing - Async

Image
Clash Royale CLAN TAG #URR8PPP Conditional Routing - Async I wanted to make a GET request to my server to verify if the user is authenticated or not, basically a true or false function. but it ended up being more complicated than that. GET true or false as i need an async , await function in order to get the response from the request i made. SO, thats what i did. but after calling the function inside a regular sync function which is PrivateRoute it only logs that the promise is still pending . async await response request sync PrivateRoute promise pending SO, i tried turning PrivateRoute into an async function. but react refused to render a [object promise] . PrivateRoute async [object promise] ANY IDEA what to do? const isAuthenticated = async () => { try{ let isAuth = await axios.get('/auth') console.log(isAuth.data) if(Object.keys(isAuth.data).length > 0) return true else return false } catch(err) { console.log(err) } } con...