When Reloading by Browser[F5] then,a state always will be undefined

Question

state.firebase.profile always is undefined when I reload by browser. Somehow, it goes well except for F5 as far as I can see.

I check by using console.log("TEST HERE"+ JSON.stringify(this.props.profile.name));.

Where should I modify it...

class ReagtTagSample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      porco:""
      tags: [{ id: 'Yugoslavia', text: 'Yugoslavia' }, { id: 'India', text: 'India' }],
      suggestions: [
        { id: "England", text: "England" },
        { id: "Mexico", text: "Mexico" },
      ],
    };
  componentDidMount=()=>{
    console.log("TEST HERE"+ JSON.stringify(this.props.profile.name));
  }

  handleAddition(tag) {
    this.setState((state) => ({ tags: [...state.tags, tag] }));
  }

  handleDrag(tag, currPos, newPos) {
    const tags = [...this.state.tags];
    const newTags = tags.slice();

    newTags.splice(currPos, 1);
    newTags.splice(newPos, 0, tag);
    this.setState({ tags: newTags });
  }
//ommit
  render() {
    const { auth, authError, profile } = this.props;
    return (
//ommit
const mapStateToProps = (state) => {
  return {
    auth: state.firebase.auth,
    authError: state.auth.authError,
    profile: state.firebase.profile,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    profileUpdate: (user) => dispatch(Update(user)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Update);

Update= (user) => {
    return (dispatch, getState, { getFirebase, getFirestore }) => {
        const firestore = getFirestore();　
        const firebase = getFirebase();
        const profile = getState().firebase.profile;
        const authorId = getState().firebase.auth.uid;
        firestore.collection('users').doc(authorId).set({
                name: user.userName,
                tags:user.tags,
            }).then(() => {
            dispatch({ type: 'PROFILE_UPDATE_SUCCESS' })
        }).catch(err => {
            dispatch({ type: 'PROFILE_UPDATE_ERROR', err })
        })
    }
}

I would like to use profile.name as default input name...

          <div className="input-field">
            <label htmlFor="userName">DisplayName</label>
            <input
              type="text"
              id="userName"
              value={this.state.userName}
              onChange={this.handleChange}
            />

Answer 1

React state and props will be reset to their initial values when we reload the web app in browser using F5 or refresh button (because the app restarts as fresh).

The console log in componentDidMount prints undefined:

componentDidMount = () => { 
  console.log("TEST HERE" + JSON.stringify(this.props.profile.name));

  // side node: you do not really need an arrow function here as it is a special 
  // lifecycle method. It will the `this` automatically binded with component instance
}

because, probably you are getting this.props.profile data through an API call. Hence, this.props.profile will receive its values asynchronously. You can see it on console log in componentDidUpdate lifecycle method.

---

Solution:

But if you want to set the default value of below input from this.props.profile.name, you can use either of these options:

Option 1: Using key and defaultValue. It will work because React components or elements re-render when their key is changed. And due to re-render it will read new defaultValue.

<input
  key={this.props.profile.name}
  defaultValue={this.props.profile.name}
  type="text"
  id="userName"
  value={this.state.userName}
  onChange={this.handleChange}
/>

Option 2: Set the userName in state when data is available in props:

componentDidUpdate(prevProps, prevState) {
  if (this.props.profile.name !== prevProps.profile.name) {
    this.setState({
      userName: this.props.profile.name,
    })
  }
}
...
<input
  type="text"
  id="userName"
  value={this.state.userName}
  onChange={this.handleChange}
/>