Hi instead of using hook API, you should use Higher-order component API as mentioned here I’ll modify the example in the documentation to suit your need for class component import React from ‘react’; import PropTypes from ‘prop-types’; import { withStyles } from ‘@material-ui/core/styles’; import Button from ‘@material-ui/core/Button’; const styles = theme => ({ root: { … Read more
You can use more than one useEffect(). For example, if my variable is data1, I can use all of this in my component: useEffect( () => console.log(“mount”), [] ); useEffect( () => console.log(“data1 update”), [ data1 ] ); useEffect( () => console.log(“any update”) ); useEffect( () => () => console.log(“data1 update or unmount”), [ data1 … Read more
You can use mixed arrays with strings and JSX elements (see the docs here): <MyComponent text={[“This is “, <strong>not</strong>, “working.”]} /> There’s a fiddle here that shows it working: http://jsfiddle.net/7s7dee6L/ Also, as a last resort, you always have the ability to insert raw HTML but be careful because that can open you up to a … Read more
I just got a similar error for the first time today. It appears in \node_modules\metro-config\src\defaults\blacklist.js, there is an invalid regular expression that needed changed. I changed the first expression under sharedBlacklist from: var sharedBlacklist = [ /node_modules[/\\]react[/\\]dist[/\\].*/, /website\/node_modules\/.*/, /heapCapture\/bundle\.js/, /.*\/__tests__\/.*/ ]; to: var sharedBlacklist = [ /node_modules[\/\\]react[\/\\]dist[\/\\].*/, /website\/node_modules\/.*/, /heapCapture\/bundle\.js/, /.*\/__tests__\/.*/ ];
When you include a main page component in your app, it is often wrapped in a <Route> component like this: <Route path=”/movies” component={MoviesIndex} /> By doing this, the MoviesIndex component has access to this.props.history so it can redirect the user with this.props.history.push. Some components (commonly a header component) appear on every page, so are not … Read more
Change <button type=”button” to <button type=”submit”. Remove the onClick. Instead do <form className=”commentForm” onSubmit={this.onFormSubmit}>. This should catch clicking the button and pressing the return key. const onFormSubmit = e => { e.preventDefault(); // send state to server with e.g. `window.fetch` } … <form onSubmit={onFormSubmit}> … <button type=”submit”>Submit</button> </form>
Use .ts for pure TypeScript files. Use .tsx for files which contain JSX. For example, a React component would be .tsx, but a file containing helper functions would be .ts.
TL;DR; useMemo is to memoize a calculation result between a function’s calls and between renders useCallback is to memoize a callback itself (referential equality) between renders useRef is to keep data between renders (updating does not fire re-rendering) useState is to keep data between renders (updating will fire re-rendering) Long version: useMemo focuses on avoiding … Read more
As the guide states, The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API. In this example from the guide it’s expected that count is 0 only on initial render: const … Read more
Quick note: You are importing a class, you can’t call properties on a class unless they are static properties. Read more about classes here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes There’s an easy way to do this, though. If you are making helper functions, you should instead make a file that exports functions like this: export function HelloChandu() { } … Read more