Почему я получаю таблицу в 4 раза больше ее размера в ReactJs?

В вашей render()функции вы уже сопоставляете элементы, а затем в том, что renderPersonOrEdit вы делаете то же самое, измените свой код на карту только с помощью функции рендеринга

class EditPersons extends React.Component {
           constructor(props) {
                super(props);
                this.state = {
                    editing: null
                };
                this.editPerson = this.editPerson.bind(this);
            }
            componentDidMount() {
                this.props.fetchData('http://localhost:9536/persons/');
            }
            editPerson(person) {
                this.setState(
                    { editing: person.PersonId }
                );
            }
            renderPersonOrEdit() {

                if (this.state.editing !== null) {
                    console.log('editing: ' + person.PersonId); //test ok
                    //Here comes the 2 textBoxes and the edit-button

                    //set editing to null after editing the contents
                }
                else {
                return <tbody>
                   {this.props.persons.map((person) => {
                        return (
                             <tr key={person.PersonId}>
                               <td onClick={()=>this.editPerson.(person)}><Link>{person.Name}<Link></td>
                                   <td>{person.Surname}</td>
                             </tr>
                        );
                   })}
                   </tbody>
                }
            }
            render() {

                if (this.props.hasErrored) {
                    return <p>Downloading has failed!</p>;
                }

                if (this.props.isLoading) {
                    return <p>Downloadinga€¦</p>;
                }

                return (
                    <div>
                        <table id="myTable">
                            <thead>
                            <tr>
                                <th>Person name</th>
                                <th>Person Surname</th>
                            </tr>
                            </thead>
                            {this.renderPersonOrEdit()}
                        </table>
                        <Link to="/project" className="btn btn-primary btn-xs" style={{marginTop: 20}}>Back</Link>
                    </div>

                );
            }
        }