Instead of writing my components inside a class, I’d like to use the function syntax. How do I override componentDidMount, componentWillMount inside function components? Is it even possible? const grid = (props) => { console.log(props); let {skuRules} = props; const componentDidMount = () => { if(!props.fetched) { props.fetchRules(); } console.log(‘mount it!’); }; return( <Content title=”Promotions” … Read more
Is using componentDidMount() as an async function good practice in React Native or should I avoid it? I need to get some info from AsyncStorage when the component mounts, but the only way I know to make that possible is to make the componentDidMount() function async. async componentDidMount() { let auth = await this.getAuth(); if … Read more
React router allows react apps to handle /arbitrary/route. In order this to work, I need my server to send the React app on any matched route. But webpack dev server doesn’t handle arbitrary end points. There is a solution here using additional express server. How to allow for webpack-dev-server to allow entry points from react-router … Read more
I can’t figure out how to set default property values for my components using Typescript. This is the source code: class PageState { } export class PageProps { foo: string = “bar”; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } And when I try … Read more
Basically, I have a react component, its render() function body is as below: (It is my ideal one, which means it currently does not work) render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here if (this.props.hasImage) <ElementA/> else <ElementB/> </div> ) } 21 Answers 21
What does the npm run eject command do? I do understand what other commands do like start, build, test. But no idea about eject. 5 Answers 5
I’m migrating a React with TypeScript project to use hooks features (React v16.7.0-alpha), but I cannot figure out how to set typings of the destructured elements. Here is an example: interface IUser { name: string; } … const [user, setUser] = useState({name: ‘Jon’}); I want to force user variable to be of type IUser. My … Read more
I’m expecting state to reload on props change, but this does not work and user variable is not updated on next useState call, what is wrong? function Avatar(props) { const [user, setUser] = React.useState({…props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading…</p>); } codepen 6 Answers 6
In React 16.2, improved support for Fragments has been added. More information can be found on React’s blog post here. We are all familiar with the following code: render() { return ( // Extraneous div element 🙁 <div> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </div> ); } Yes, we need … Read more
What are controlled components and uncontrolled components in ReactJS? How do they differ from each other? 5 Answers 5
