How to use an if within a map in react.js?

Question

I have this function where I have this piece of code, but it does not return anything, just leave blank

mostrarPostsNoValidos() {
    if(this.state.posts.length > 0) {
        this.state.posts.map((post, key) => {
            if(post.validado === "0"){
                return (
                    <a href={`/post/${post.id}/${post.slug}`} key={key}>
                        <div className="card post">
                            <div className="card-body">
                                {post.titulo}
                            </div>
                        </div>
                    </a>
                );
            }
        });
    } else {
        return <h3>No hay posts que mostrar aún</h3>
    }
}

Your `return` statement is returning from `map`'s callback function. Your outer function `mostrarPostsNoValidos` doesn't return anything if `if` condition is equal to `true`. Just add `return` on the third line before `map` invocation. Although, I should mention that `map` is not the perfect suit for your case. More like `reduce` or you'll have to wrap `map` within `filter`. — Dan Karbayev, Jun 12 '18 at 20:09

score 0 · Accepted Answer · answered Jun 12 '18 at 20:11

Solution: add "return this.state.posts.map"

mostrarPostsNoValidos() {
    if(this.state.posts.length > 0) {
        return this.state.posts.map((post, key) => {
            if(post.validado === "0"){
                return (
                    <a href={`/post/${post.id}/${post.slug}`} key={key}>
                        <div className="card post">
                            <div className="card-body">
                                {post.titulo}
                            </div>
                        </div>
                    </a>
                );
            }
        });
    } else {
        return <h3>No hay posts que mostrar aún</h3>
    }
}

Not even citing where you got the solution from - to your own question.. — wiesion, Jun 12 '18 at 20:32

How to use an if within a map in react.js?

1 Answers1