I’m trying to make a user profiles page where user can see their address and allow them to edit and save a new address (not locally!). Program is able to fetch data from backend then after using componentDidMount() method the user’s address renders only once after reload. Then I used componentDidUpdate() to keep displaying the user’s address upon reloading page but the same thing is happening. I was trying to render the values through componentdidupdate but it didn’t work because the component is mounting before there is a user provided and I don’t know how to do that. componentdidupdate causes an infinite loop of updates. I’m really stuck on this issue.
Not really sure how to get my program to update the user’s address and keep displaying it upon refresh until user wants to edit? Please help
Note: deleted addressLine2, city, state, zipCode for convenience.
Address.jsx
**
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
import axios from 'axios';
class Address extends Component {
constructor(props) {
super(props)
this.state ={
userDetails: null,
addressLine1: '',
updatedAt: null } }
handleFirstAddLineChange = (event) => {
this.setState({addressLine1: event.target.value}) }
setUserDetails = (user) => {
this.setState({ userDetails: user}) }
componentDidMount(){
const user = this.props.currentUser
if (user){const authResponse = user.getAuthResponse();
axios .get(`http://127.0.0.1:8085/api/users?idToken=${authResponse.id_token}`)
.then(res => {this.setState(res.data.addresses[0]) this.setUserDetails(res.data) });
}}
onSubmit = (event) => {event.preventDefault();
const insertAddress = (googleUser) => {
const addressInfo = { addresses: [{addressLine1: this.state.addressLine1 }]};
const authResponse = googleUser.getAuthResponse();
const idToken = authResponse.id_token;
const user = googleUser.profileObj;
user.addresses = addressInfo.addresses; axios.put(`http://127.0.0.1:8085/api/users?
idToken=${idToken}`, user) .then(authResponse => this.setState({updatedAt:
authResponse.data.updatedAt})); };
insertAddress(this.props.currentUser) }
componentDidUpdate(prevProps) {
if (this.props.currentUser !== prevProps.currentUser) { this.setState({ curr:
this.props.currentUser}); console.log("changed")}}
render() {return (<form onSubmit={this.onSubmit}>
<h1 className="main-container">Address </h1>
<div className="main-container">
<label> Address Line 1: </label>
<input className="input" type='text' value={this.state.addressLine1} onChange=
{this.handleFirstAddLineChange}/> </div>
</div> <Button className="btn" type="submit">Save Changes</Button>
</form> );}}
export default Address;