reactjs – Page 144 – Tarik Billa

Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type

October 12, 2022 by Tarik

I had a similar error but for me it was react-router. Solved it by installing types for it. npm install –save @types/react-router Error: (6,30): error TS7016: Could not find a declaration file for module ‘react-router’. ‘\node_modules\react-router\index.js’ implicitly has an ‘any’ type. If you would like to disable it site wide you can instead edit tsconfig.json … Read more

Axios get in url works but with second parameter as object it doesn’t

October 11, 2022 by Tarik

axios.get accepts a request config as the second parameter (not query string params). You can use the params config option to set query string params as follows: axios.get(‘/api’, { params: { foo: ‘bar’ } });

How to scroll to bottom in react?

October 11, 2022 by Tarik

As Tushar mentioned, you can keep a dummy div at the bottom of your chat: render () { return ( <div> <div className=”MessageContainer” > <div className=”MessagesList”> {this.renderMessages()} </div> <div style={{ float:”left”, clear: “both” }} ref={(el) => { this.messagesEnd = el; }}> </div> </div> </div> ); } and then scroll to it whenever your component is … Read more

Set types on useState React Hook with TypeScript

October 11, 2022 by Tarik

Use this const [user, setUser] = useState<IUser>({name: ‘Jon’}); See the Corresponding Type in DefinitelyTyped

Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’

October 11, 2022 by Tarik

In react-router-dom v6 useHistory() is replaced by useNavigate(). You can use: import { useNavigate } from ‘react-router-dom’; const navigate = useNavigate(); navigate(‘/home’);

What are React controlled components and uncontrolled components?

October 11, 2022 by Tarik

This relates to stateful DOM components (form elements) and the React docs explain the difference: A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props … Read more

Is it possible to use if…else… statement in React render function?

October 10, 2022 by Tarik

Not exactly like that, but there are workarounds. There’s a section in React’s docs about conditional rendering that you should take a look. Here’s an example of what you could do using inline if-else. render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> … Read more

Updating state on props change in React Form

October 9, 2022 by Tarik

componentWillReceiveProps is depcricated since react 16: use getDerivedStateFromProps instead If I understand correctly, you have a parent component that is passing start_time down to the ModalBody component which assigns it to its own state? And you want to update that time from the parent, not a child component. React has some tips on dealing with … Read more

Is it possible to return empty in react render function?

October 9, 2022 by Tarik

Yes you can, but instead of blank, simply return null if you don’t want to render anything from component, like this: return (null); Another important point is, inside JSX if you are rendering element conditionally, then in case of condition=false, you can return any of these values false, null, undefined, true. As per DOC: booleans … Read more

create react app not picking up .env files?

October 9, 2022 by Tarik

With create react app, you need to prefix REACT_APP_ to the variable name. ex: REACT_APP_API_URL=http://localhost:3000/api REACT_APP_CALLBACK_URL=http://localhost:3005/callback CRA Docs on Adding Custom Environment Variables: Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the … Read more