BrowserRouter It uses history API, i.e. it’s unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. Usually this means that web server should be configured for single-page application, i.e. same index.html is served for /react/route … Read more
You need to pass an array of element to jsx. The problem is that forEach does not return anything (i.e it returns undefined). So it’s better to use map because map returns an array: class QuestionSet extends Component { render(){ <div className=”container”> <h1>{this.props.question.text}</h1> {this.props.question.answers.map((answer, i) => { console.log(“Entered”); // Return the element. Also pass key … Read more
react-router v4 introduces a new way to block navigation using Prompt. Just add this to the component that you would like to block: import { Prompt } from ‘react-router’ const MyComponent = () => ( <> <Prompt when={shouldBlockNavigation} message=”You have unsaved changes, are you sure you want to leave?” /> {/* Component JSX */} </> … Read more
it is because you are rendering the form in a function inside render(). Every time your state/prop change, the function returns a new form. it caused you to lose focus. Try putting what’s inside the function into your render directly. <main id=”main” role=”main”> <div className=”container-fluid”> <FormPostSingle /> </div> </main> ===> <main id=”main” role=”main”> <div className=”container-fluid”> … Read more
The id should be placed inside of componentWillMount (update for 2018) constructor, not render. Putting it in render will re-generate new ids unnecessarily. If you’re using underscore or lodash, there is a uniqueId function, so your resulting code should be something like: constructor(props) { super(props); this.id = _.uniqueId(“prefix-“); } render() { const id = this.id; … Read more
Edit: With the introduction of Hooks it is possible to implement a lifecycle kind of behavior as well as the state in the functional Components. Currently Hooks are a new feature proposal that lets you use state and other React features without writing a class. They are released in React as a part of v16.8.0 … Read more
I found the easiest solution to include a small config: devServer: { port: 3000, historyApiFallback: { index: ‘index.html’ } } I found this by visiting: PUSHSTATE WITH WEBPACK-DEV-SERVER.
Let’s start by pointing out the differences and determining how it could cause troubles. Here is the code of async and “sync” componentDidMount() life-cycle method: // This is typescript code componentDidMount(): void { /* do something */ } async componentDidMount(): Promise<void> { /* do something */ /* You can use “await” here */ } By … Read more
Why does declare const window: any; work? Because you declare a local variable of type any. Having something of type any essentially turns off type checking for window so you can do anything with it. I really do not recommend this solution, it is a really bad one. Why doesn’t type Window = { FB: … Read more
You can use useEffect/useLayoutEffect to achieve this: const SomeComponent = () => { const [count, setCount] = React.useState(0) React.useEffect(() => { if (count > 1) { document.title=”Threshold of over 1 reached.”; } else { document.title=”No threshold reached.”; } }, [count]); return ( <div> <p>{count}</p> <button type=”button” onClick={() => setCount(count + 1)}> Increase </button> </div> ); … Read more