update array

I want to create component with table which have add, update, delete operations. But when I try to add some test element to array I got this error

Uncaught TypeError: this.documents is not iterable at HTMLButtonElement.addNewDocument

This is simple code, but I can’t figure where is bug.

documents: string[] = [];

addNewDocument() {
 this.documents= [... this.documents, "test2"];

render() {

   return (
          <button onClick={this.addNewDocument} type="button" class="btn btn-success">
            <i class="fa fa-plus"></i>
            <span class="btn-text">add new</span>

          {this.documents && this.documents.length ? (


                  {this.documents.map(document => (

          ) : (