Вывод данных полученных в axios

import React from 'react';
 
import axios from 'axios';
const url=`https://api.mocki.io/v1/ee36ef53`
 
export default class PersonList extends React.Component {
    state = {
        post: []
    };
 
    componentDidMount() {
        axios.get(url)
            .then(res => {
                const persons = res.data;
                this.setState({ post: persons.data.recipes });
                console.log(persons)
                debugger;
            });
    }
    render() {
        // if (!this.state.post) return;
 
        return (<div>
                {
                    this.post.map(post=><div key={this.post.id}>{this.post.username} </div>)
 
                }
 
            </div>
        )
    }
}

   return (<div>
                {
                    this.state.post.data.map(post=><div key={this.state.post.id}>{this.state.post.username} </div>)
 
                }
 
            </div>
        )

const url = `https://api.mocki.io/v1/ee36ef53`;
 
class PersonList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      post: [],
    };
  }
 
  componentDidMount() {
    axios.get(url).then(res => {
      const persons = res.data;
      this.setState({ post: persons.data.recipes });
      console.log(persons);
      debugger;
    });
  }
  render() {
    return (
      <div>
        {this.state.post.map(it => (
          <div key={it.id}>{it.creator.username}</div>
        ))}
      </div>
    );
  }
}