Вам необходимо вернуть jsx из функции, переданной методу map
.
Используйте return
внутри функции, переданной методу map
.
const posts =
this.state.posts.length > 0
? this.state.posts.map(elem => {
return (
<div className="col s12 m7">
<h2 className="header">{elem.title}</h2>
<div className="card horizontal">
<div className="card-stacked">
<div className="card-content">
<p>{elem.body}</p>
</div>
<div className="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
);
})
: null;
Вы также можете использовать ()
для неявного return
.
const posts =
this.state.posts.length > 0
? this.state.posts.map(elem => (
<div className="col s12 m7">
<h2 className="header">{elem.title}</h2>
<div className="card horizontal">
<div className="card-stacked">
<div className="card-content">
<p>{elem.body}</p>
</div>
<div className="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
))
: null;
Также используйте className
для class
внутри jsx.