Reactjs: which special character in string variable would result in new line when the variable is in html tag?

I try to pass a variable to html tag and want to display a list of strings:

...

incompleteFields = ["Name", "Gender", "Age"].join(`n`)
this.setState({incompleteFields: incompleteFields})
...

          <div className={classes.modalPaper}>
            <h2 id="transition-modal-title">Warning</h2>
            <br/>
            <p 
             id="transition-modal-description"
            >
              some fields are empty: &#10;
              { this.state.incompleteFields }
            </p>
            
          </div>

However, the following is displayed:

Warning

some fields are empty:Name Gender Age

I want to display:

Warning

some fields are empty:
Name 
Gender 
Age

Any suggestions?

Answer

Use map function:

...

incompleteFields = ["Name", "Gender", "Age"]
this.setState({incompleteFields: incompleteFields})
...

          <div className={classes.modalPaper}>
            <h2 id="transition-modal-title">Warning</h2>
            <br/>
            <p 
             id="transition-modal-description"
            >
              some fields are empty: &#10;
              { this.state.incompleteFields && this.state.incompleteFields.map((field) => (<br/>{field})) }
            </p>
            
          </div>