Try this and the items will be listed one after another as you expect.

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

.inc {
  display: block;
}

<div className={classes.modalPaper}>
  <h2 id="transition-modal-title">Warning</h2>
  <br/>
  <p 
   id="transition-modal-description"
  >
    some fields are empty;
    { this.state.incompleteFields.map(incomplete => {
      return(<span className='inc'>{incomplete}</span>)
    }) }
  </p>

</div>

Nothing wrong with your code. just adding css property :

white-space:pre;

Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag or p.

document.getElementById('test').innerHTML = ["Name", "Gender", "Age"].join(`n`);

#test{
  white-space:pre;
}

<div id="test"></div>

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>

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?