Should I set up the default text in the State of my component or with componentDidMount?

JavaScript
1

Tell us what’s happening:

Hello,

So for the “Build a Markdown Previewer” I got all tests passing in both scenarios that I have tried, but not sure which one is better practice.

In the main component:

  1. In the first scenario I set up the default text and markdown line though componentDidMount (leaving the state with empty strings):
  componentDidMount() {
    this.setState({
      textInput: placeholderText,
      markdownText: marked(placeholderText)
    })
  }

and

constructor() {
    super()
    this.state = {
      textInput: "",
      markdownText: ""
    }
    this.handleChange = this.handleChange.bind(this)
  }
  1. In the second option, I have set it up without componentDidMount and rather directly put code in the state:
constructor() {
    super()
    this.state = {
      textInput: placeholderText,
      markdownText: marked(placeholderText)
    }
    this.handleChange = this.handleChange.bind(this)
  }

Here is my Codepen code for this project (I haven’t set up CSS for it yet, so it doesn’t look nice visually yet).

I read before that componentDidMount is primarily suitable for AJAX requests that require a mounted DOM before filling some fields out with data, but I also remember reading how it is not recommended to directly change the state. However, in this case I assume we are not really change it, just setting up the default, and it is permitted to do it directly. Do I understand it correctly?

Best regards,
Konstantin

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36.

Challenge: Build a Markdown Previewer

Link to the challenge: