Showing posts with label React. Show all posts
Showing posts with label React. Show all posts

Thursday, 10 June 2021

How to use componentWillUnmount with Functional Components in React

How to manage componentWillUnmount with useEffect

If you add a return function inside the useEffect function, it is triggered when a component unmounts from the DOM. This looks like:


import React, { useEffect } from 'react';

const ComponentExample => () => {

    useEffect(() => {

        return () => {

            // Anything in here is fired on component unmount.

        }

    }, [])

} 

Friday, 24 April 2020

How to add validation message to React Material UI Autocomplete?

You can firnd Autocomplete textbox of material ui on this link
When you use this autocomplete inside form and you want to set validation error message on autocomplete then you have to put the attribute to  textfield inside the <Autocomplete> Tag
Here below some example code which is working on versions dependencies
"@material-ui/core": "^4.9.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.50",
"@material-ui/styles": "^4.9.0"



<Autocomplete
                  value={editcountry}
                  id="combo-box-demo"                 
                  options={countryList}
                  getOptionLabel={option => option.CountryName}
                  onChange={onCountryChange}
                  disableClearable
                  style={{ width: 300 }}
                  className={classes.textField}
                  renderInput={params => (                   
                    <TextField
                      {...params}
                      error={hasError("idCountryMaster")}
                      helperText={
                        hasError("idCountryMaster") ? formState.errors.idCountryMaster[0] : null
                      }
                      label="Country Master"
                      variant="outlined"
                    />
                  )}
                />