نمایش دیتای api در رندر

@neda.haghgoo
1 - پارامتر props رو به constractor() و متد super() پاس نداده بودین
2- همیشه پاسخ api رو لاگ بگیرید تا بفهمید اطلاعات مورد نیاز کجاست مثلا اینجا یه data کم زدید و درستش res.data.data هست.
3 - نحوه گرفتن displayList از state ها در متد رندر به این شکله

const {displayList} = this.state;

4 - displayList.length !== 0 && <div className="content"> منظورتون از این احتمالا inline if هست که فرمت درستش اینه

displayList.length > 0 ?isTrue:isFalse

5 - درکل

import React, {Component} from 'react';
import style from '../src/index.css';
import axios from 'axios';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            displayList: []
        }
    }

    componentDidMount() {
        axios.get(`http://karmento.ir/api/v2/getProjectList`)
            .then(res => {
                console.log(res);
                const data=res.data.data;
                this.setState({
                    displayList: data
                })
            }).catch(error => {
            console.log(error);
        })
    }

    render() {
        const {displayList} = this.state;
        return (
            <div>
                {
                    displayList.length > 0 ?
                        displayList.map((item,index) =>
                            <div key={index}>
                                <article style={{ flexGrow: 7 }}>
                                    <div className="account-info">
                                        <img src="./public/image/profile.jpg" alt="profile" />
                                        <h1>{item.diffTime}</h1>
                                    </div>
                                </article>
                                <article style={{ flexGrow: 5 }}>
                                    <div className="description">
                                        <p>{item.user.name + '' + item.user.family}</p>
                                        <p>{item.title}</p>
                                        <p>{item.description}</p>

                                    </div>
                                </article>
                                <article style={{ flexGrow: 2 }}>
                                    <div className="suggestion">
                                        <img src="./public/image/eye.png" />
                                        <p className="suggestion-border">{item.viewCount}</p>
                                        <img src="./public/image/eye.png" className="img-second" />
                                        <p>{item.user.isAdviser}</p>
                                        <p className="suggest">پیشنهاد</p>
                                    </div>
                                </article>
                                <article style={{ flexGrow: 2 }}>
                                    <div className="details">
                                        <p>عادی</p>
                                        <img src="./public/image/icon2.png" />
                                    </div>
                                    <a className="detail-button">جزئیات</a>
                                </article>
                            </div>
                        )
                        :
                        null
                }
            </div>
        )
    }
}

@hamidrezayas67
خیلی ممنون از راهنمائیتون،
من الان از displayList، console.log میگیرم نمایش میده ولی تو صفحه نشونش نمیده استایلی هم که دادم به این شکله:

return (
            <div className="content-style">
                {displayList.map(item => {
                        <div className="content">
                            <article style={{ flexGrow: 7 }}>
                                <div className="account-info">
                                    <img src="./public/image/profile.jpg" alt="profile" />
                                    <h1>{item.diffTime}</h1>
                                </div>
                            </article>
                            <article style={{ flexGrow: 5 }}>
                                <div className="description">
                                    <p>{item.user.name + '' + item.user.family}</p>
                                    <p>{item.title}</p>
                                    <p>{item.description}</p>
                                </div>
                            </article>
                            <article style={{ flexGrow: 2 }}>
                                <div className="suggestion">
                                    <img src="./public/image/eye.png" />
                                    <p className="suggestion-border">{item.viewCount}</p>
                                    <img src="./public/image/eye.png" className="img-second" />
                                    <p>{item.user.isAdviser}</p>
                                    <p className="suggest">پیشنهاد</p>
                                </div>
                            </article>
                            <article style={{ flexGrow: 2 }}>
                                <div className="details">
                                    <p>عادی</p>
                                    <img src="./public/image/icon2.png" />
                                </div>
                                <a className="detail-button">جزئیات</a>
                            </article>
                        </div>
                    })
                }
            </div>
        )
    }

style.css:

.container{
  width:80%;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 7.5em 0;
  text-align: right;
  direction: rtl;
}
.content{
  float: right;
  height: 220px;
  display: flex;  
  padding:0 3em;
}

.menu{
  width: 16%;
  height: 600px;
}
.profile{
  background-color: #395662;
}
.profile img{
  width: ***;
  height: ***;
  border-radius: 50%;
  margin:0 auto;
  padding:2em 3em 0em;
}
.profile h1{
  padding: 0 1em 2em;
  margin:0;
  font-size: 1.3rem;
  text-align: center;
}
nav ul{
  margin:0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 600;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color:#7C7D80;
  text-align: right;
  list-style-type: none; 
  border:1px solid #C5C5C6;
}
nav ul li{
  padding:0.*** 0.8em;
}
.account-info{
  margin:0 auto;
  text-align: center;
  padding: 1em 0;
}
.account-info img{
  width: 5.3em;
  height: 5.3em;
}
.account-info h1{
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin:0;
}
.suggestion{
  display: flex;
  height: ***;
  align-items: center;
  text-align: center;
  margin:0 auto;
  padding:0 1em;
}
.suggestion img{
  width: 2em;
  height:1em;
}
.description{
  padding: 1em;
  font-size: 1.1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.suggestion-border{
  width: 1.5em;
  height: 2em;
  border-left: 2px solid #999A97;
  margin-top: 1.8em;
  text-align: right;
  padding-top: 0.4em;
}
.img-second{
  margin-right: 1em;
}
.suggest{
  padding-right: 0.5em;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
}
.details{
  display: flex;
  justify-content: space-between;
  align-items:center;
  margin:0 auto;
  padding:1em 1em 1.2em 0em;
}
.details img{
  width: 2em;
  height: 2.4em;
}
.details p{
  font-size: 1.2rem;
  font-weight: 500;
  padding-top:0.5em;
}
.detail-button{
  border:3px solid #1F3B4D;
  color: #38576C;
  font-size: 1.3rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding:0 1.4em 0.3em;
  margin:0.4em 1.2em 0 0;
  border-radius: 0.3em;  
}
header{
  width:91%;
  margin:0 auto;
  display: flex;
  padding:0 1.2em 0.3em;
  font-size: 2.1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  height: 1.8em;
  border-bottom: 3px solid #38576C;
  border-bottom-width: 80%;
}
header h1{
  flex-grow: 1.3;
  flex-direction: column;
  font-size: 1.4rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  padding-bottom: 0.8em;
  margin:0;
}
.filter{
  display: flex;
  align-self: baseline;
}
.filter h1,img,p{
  padding-left:0.7em;
}
.filter img{
  width: 0.***;
  height: 0.***;
  align-self: center;
  opacity: 0.3;
}
.filter p{
  font-size: 0.8rem;
}
.filter h1{
  font-size: 1.2rem;
  font-weight: 200;
  color:#555AE1;
  padding-top:0.4em; 
}

.main{
  border: 1px solid #C5C5C6;
  width: 81%;
  padding: 2em 0.5em;
}
.search{
  height:2.7em;
  margin:15px;
  border-top:1px solid #DBDEE4;
  border-radius: 0.3em;
  background-color:#E6E8EC; 
}

.search p{
  text-align: center;
  color:#9EA0A5;
  font-size: 1.5rem;
  padding-top:0.2em;
  margin:0;
}
.content-style{
  width:100%;
  height:auto;
}

یعنی دیتا هست ولی در قالب html نمایش نمیده. css ها رو هم میشناسه. ممنون میشم راهنمائی بفرمائید

دوستان راه حلی برای این مسئله دارید؟
@milad
@ali.bayat
@hesammousavi
@hamidrezayas67

@neda.haghgoo
من ری اکت کار نکردم، نمی دونم درست، ولی چیزی که الان به چشمم میادش توی این کد اینه که مقادیری که داخل return قرار دادید عجیب غریبه.
اونچه که من هنگام نوشتن کدهای html داخل جاوااسکریپت رعایت می کنم اینه که کدها html رو بصورت رشته قرار میدیم و متغیرها رو هم با $ داخلش می نویسیم.

در مرحله ی اول هم، از گرفتن اطلاعات اولیه از api مربوطه اطمینان حاصل کنید.
من کد زیر رو نوشتم، تابع console.log این اطمینان رو میده که داده ها به درستی دریافت میشند.

const getDrinksByName = async() => {
        try {
            const url = await fetch(`http://karmento.ir/api/v2/getProjectList`);
            const res = await url.json();
            console.log(res.data);

        } catch (error) {
            alert(error);
        }
    }
getDrinksByName();

@milad
ممنون از راهنمائیتون.
متوجه شدم مشکل از کجاست به جای

 {displayList.map(item => {

بایستی این رو مینوشتم:

 {displayList.map(item => (

در واقع به جای (، { گذاشته بودم.
الان داره به درستی نشون میده.