Django Rest Frameworkで作成したAPIをReact上で呼び出したい。

前提・実現したいこと

DjangoとReact.jsを使い、簡単な投稿アプリを練習で作っています。

発生している問題・エラーメッセージ

Django REST frameworkでAPIを作成することは成功し、Reactのサーバー上でconsole上にはデータが表示されるのですが、呼び出し方がわからずに困っています。初歩的なところで申し訳ないですがお力を貸していただきたいです。

###実現したいこと
画像のようにAPI上のデータであるnameとcontentを画像のように表示したいと思っております。

該当のソースコード

こちらがDjango REST frameworkのデータです。
![]

こちらがReactの親コンポーネントです。

import
1import axios from 'axios';
2// import Posts from './Posts';
3import React, {useState,useEffect} from 'react';
4import './Posts.css';
5// import Avatar from '@material-ui/core/Avatar';
6// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7// import { faHeart } from '@fortawesome/free-solid-svg-icons';
8import Posts from './Posts';
9
10class Post extends React.Component {
11    constructor(props) {
12     super(props);
13     this.state = {
14        articles: []
15      }
16    }
17
18    componentDidMount() {
19        axios.get('http://127.0.0.1:8000/api/')
20            .then( res => {
21                this.setState({
22                    articles: res.data,
23                   
24                });
25                console.log(res.data);
26                
27            })
28    }
29
30
31
32    render() {
33        return(
34            <div className="app">
35            <div className="app_header">
36                    <img
37                        className="app_headerImage"
38                        src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
39                        alt=""
40                    />
41            </div>
42            <div className="app_posts">
43                <Posts data={this.state.articles}/>
44            </div>
45            </div>
46            
47        
48        )
49    }
50}
51
52export default Post;
53
54
55

こちらがReactの子コンポーネントです。

import
1import './Posts.css';
2import Avatar from '@material-ui/core/Avatar';
3import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4import { faHeart } from '@fortawesome/free-solid-svg-icons';
5
6
7const Posts = props =>  {
8
9    return(
10        <div className="post">
11            <div className="post_header">
12                <Avatar
13                className="post_avatar"
14                alt="Gafe"
15                src="/static/images/avatar/1.jpg"
16                />
17                <h3>{props.data.name}</h3>
18            </div>
19   
20            {/* <img className="post_image" src="https://pbs.twimg.com/media/EefjHDXU0AEqPCI.jpg" alt=""/> */}
21   
22           
23            <div className="icon">
24   
25            <FontAwesomeIcon icon={faHeart} size="lg" style={{color: "FF3366"}} />
26   
27            <div className="likedby">
28                <p>
29                Liked by
30                {/* {likedname.map((like) => (
31                <strong className="likednames">kiki</strong>
32                ))} */}
33                </p>
34            </div>
35       </div>
36   
37          <h4 className="post_text"><strong className="strongtext">{props.data.name}</strong>{props.data.content}</h4>
38   
39   
40          <div className="post_comments" >
41          {/* {comments.map((comment) => (
42            <p>
43            <strong>{comment.username}</strong> {comment.text}
44            </p>
45          ))} */}
46          </div>
47   
48   
49        {/* {user &&(
50          <form className="post_commentBox">
51           <input
52            className="post_input"
53            type="text"
54            placeholder="Add a comment..."
55            value={comment}
56            onChange = {(e) => setComment(e.target.value)}
57           />
58           <button
59            className="post_button"
60            disable={!comment}
61            type="submit"
62            onClick={postComment}
63            >
64           Post
65           </button>
66          </form>
67       )}
68    */}
69        </div>
70    
71    )
72  
73}
74
75export default Posts;
76