How to pass the value of "address" of this library to parent component

[MeRahulAhire]

trafficstars

I'm making a stepper form which has a <parent/> component as follow

import React, { Component } from 'react'
import Location from './Location'
export class Parent extends Component {
	
	state={
		step:1,
		location:''
	}
	locationHandler = () => {
		this.setState({location: this.state.address})
	}
	render() {
		const { step } = this.state;
		const { location} = this.state;
		const values = {location}
		switch(step){
			case 1:
				return (
			
					<Location
					locationHandler={this.locationHandler}
					value={value}
					/>
				
			)
			case 2:
				return(
					// other component..
				)
		}
	}
}

export default Parent

and the Location component

import React, { Component } from 'react'
import PlacesAutocomplete from 'react-places-autocomplete';

export class Location extends Component {
	constructor(props) {
		super(props);
		state = { address: '' };
	}

	handleChange = (address) => {
		this.setState({ address });
	};
	render() {
		const { values, locationHandler } = this.props;   //<------Here----
		locationHandler()                                 //<------Here----
		return (
			<div>
			<PlacesAutocomplete
			value={this.state.address}
			onChange={this.handleChange}
			shouldFetchSuggestions={this.state.address.length > 2}
			>
			{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
				<div >
					<input
						{...getInputProps({
							placeholder: 'Search Your College',
							className: 'typo'
						})}
					/>
					<div className="autocomplete-dropdown-container">
						{loading && <div />}
						{suggestions.map((suggestion) => {
							// const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
							const style = suggestion.active
								? { backgroundColor: '#42a5f5', cursor: 'pointer' }
								: { backgroundColor: '#ffffff', cursor: 'pointer' };
							return (
								<div
									className="suggestion"
									{...getSuggestionItemProps(suggestion, {
										style
									})}
								>
									<i className="loc_marker material-icons">location_on</i>
									<div className="loc_span">
										<span className="suggestion_dropdown">{suggestion.description}</span>
									</div>
									<div className="loc_continue">...</div>
								</div>
							);
						})}
					</div>
				</div>
				)}
			</PlacesAutocomplete>	
			</div>
		)
	}
}

export default Location

which mainly comprises the code from your library and I have customized it little bit for my convenience but anyways the main point is I want to pass the value of this.state.address into the parent component

but as you see the way I've tried is giving me this error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

> 62 |    this.setState({location: this.state.address})
     | ^  63 | 
  64 |  }
 
View compiled

locationInput.render
C:/Users/Rahul/Desktop/cfm-usersignup/src/public/form/lib-component/locationInput.js:42
  39 | };
  40 | render() {
  41 | 	const { values, locationHandler } = this.props;
> 42 | 	locationHandler()
     | ^  43 | 	
 

I also tried to pass the location by onChange method through the div'sandinput` but it didn't do/passed any value to the parent component. Can you please tell me whats actually happening here and how can I fix it...