Jest Component Will Mount Cannot Read Property 'getcurrentposition' of Undefined
How to Use componentWillMount in React
Introduction
Working with a library like React requires several components to represent a unit of logic for specific functionality. Hence, it requires consuming resource. The componentWillMount() lifecycle hook is primarily used to implement server-side logic before the actual rendering happens, such as making an API phone call to the server. In this guide, you will learn to use componentWillMount() and brand API calls after the initial component rendering.
Using componentWillMount() to Manipulate Land
As you know, the life-cycle hook componentWillMount triggers before the initial render, and the part will only trigger once in the lifespan of a component.
It is used to update the country value before the DOM is rendered, creating a state variable, as shown below.
1 constructor ( ) { 2 super ( ) ; iii this . state = { 4 message : "This is initial message" 5 } ; half dozen } jsx
Equally shown above, at that place is one state variable called bulletin with a default string. Now update the message as shown beneath.
1 componentWillMount ( ) { 2 this . setState ( { message : "This is an updated message" } ) ; 3 } jsx
Once the component gets initiated, the current state value volition be overridden with the updated value, but continue in mind this happens one time in a lifetime of a component.
And the last step is to impress the message inside the render() part, as demonstrated below.
1 return ( ) { 2 return ( 3 < div > four < p > Update the state </ p > 5 < 60 minutes /> half-dozen { this . country . message } 7 </ div > viii ) ; 9 } jsx
When you lot run the above example, the message variable'south value is updated once the component gets initiated; this is the standard way to manipulate the concern logic.
Using componentWillMount() to Make API Calls
1 of the primary usages of componentWillMount() is to brand API calls once the component is initiated and configure the values into the state.
To brand an API call, use an HttpClient such equally Axios , or or y'all tin can use fetch() to trigger the AJAX call.
The function with the fetch() API telephone call is shown below.
1 componentWillMount ( ) { 2 fetch ( "https://jsonplaceholder.typicode.com/todos/1" ) 3 . then ( response => response . json ( ) ) 4 . then ( json => { 5 this . setState ( { todo : json } ) ; 6 } ) ; 7 } jsx
fetch() is used along with the dummy API URL, which hits the server and fetches the data; in the terminate, the response is updated into the state variable todo , which contains the object.
one this . setState ( { todo : json } ) ; jsx
After getting the response from the API, you can consume the information every bit per your requirements. Below is a complete case of this.
1 import React , { Component } from "react" ; ii 3 grade ApiCall extends Component { four constructor ( ) { 5 super ( ) ; half-dozen this . country = { 7 todo : { } viii } ; 9 } x 11 componentWillMount ( ) { 12 fetch ( "https://jsonplaceholder.typicode.com/todos/one" ) 13 . then ( response => response . json ( ) ) fourteen . then ( json => { 15 this . setState ( { todo : json } ) ; xvi } ) ; 17 } 18 xix render ( ) { twenty const { todo } = this . state ; 21 panel . log ( todo ) 22 return ( 23 < div > 24 < p > API call : </ p > 25 Todo championship : < p > { todo . title } </ p > 26 Todo completed : < p > { todo . completed === true ? "true" : "false" } </ p > 27 </ div > 28 ) ; 29 } 30 } 31 32 export default ApiCall ; jsx
Keep in mind that irresolute the state value inside componentWillMount will not re-run the component once more and once more, unlike other life-bike methods.
Notation: Every bit per the official React documentation, the life-bike hook componentWillMount deprecates. It volition work until version 17, just you can rename it to UNSAFE_componentWillMount . A componentWillMount hook won't exist able to become access to the native DOM elements because it triggers before the render() function, then elements (HTML) will not be available to use.
Conclusion
The componentWillMount lifecycle claw is an ideal option when it comes to updating business concern logic, app configuration updates, and API calls.
Use it wisely because there is a chance that the app will need to be re-run one time changes are found. Y'all accept learned how to make AJAX API calls and update the initial land values. I hope it will assistance y'all.
Source: https://www.pluralsight.com/guides/how-to-use-componentwillmount