Archives : August-2017

I am taking an input from the user of the card number and wants that the length entered by user must not be less than and more than 12. Here is the declaration of my textfield. <TextField id=”SigninTextfield” label=”Aadhaar number” id=”Aadhar” lineDirection=”center” required={true} type=”number” maxLength={12} style={styles.rootstyle} erorText=”Please enter only 12 digits number” /> Now I ..

Read more

const rootEl = document.getElementById(‘root’); ReactDOM.render( <BrowserRouter> <Switch> <Route exact path=”/”> <MasterPage /> </Route> <Route exact path=”/details/:id” > <DetailsPage /> </Route> </Switch> </BrowserRouter>, rootEl ); I am trying access the id in the DetailsPage component but it is not being accessible. I tried <DetailsPage foo={this.props}/> to pass parameters to the DetailsPage, but in vain. export default ..

Read more

I have created a custom button component for my website’s navbar. When the user clicks on a button, the component returns a Redirect, which takes the user to the page they selected. export default class Button extends Component { constructor(props){ super(props); this.state = {redirect:false}; this._handleClick = this._handleClick.bind(this); } _handleClick(e) { e.stopPropagation(); this.setState({redirect: true}); } componentDidUpdate() ..

Read more

I have a website built with react, which uses react-router. For some route I want to serve another page or static file, but since all request are forwarded to react router, its doesn’t work. for example www.myapp.com/sitemap.xml www.myapp.com/something.html ^ these link works first time, but once i load website then it doesn’t work, as all ..

Read more

As I’ve understood it BrowserRouter from react-router v4 should not use # in the url anymore, but for me, the hash is still added for some strange reason… import React from ‘react’; import ReactDOM from ‘react-dom’; import {BrowserRouter} from ‘react-router-dom’; import {Provider} from ‘react-redux’; import {createStore, applyMiddleware} from ‘redux’; import app from ‘./reducers/reducers.js’; import thunkMiddleware ..

Read more

I’m trying to push from base component to another with some data defined in the base component which is sent as params with history.push. Base Component class BaseComponent extends React.Component { gotoTargetPage() { const params = { data: {fname: ‘john’, lname: ‘doe’ } }; this.props.history.push(‘/target-page’, params); } render() { return( <button onClick={event => this.gotoTargetPage()}>Go!</button>) } ..

Read more