I'm using react and i want to map a component only when all my conditions are true, but there are 4 conditions and i don't want to use nested if statements

I tried this and it works, but i just think is ugly and not a good practice:

{posts.map((post, i) => {
              if (
                post.author &&
                post.story_title &&
                post.story_url &&
                post.created_at
              ) {
                return <Card key={i} post={post} />;
              } else {
                return null;
              }

I also tried this and it seems to work, but i'm not sure because when i log the variable isValidPost i get a date and not a boolean false or true:

 {posts.map((post, i) => {
              let isValidPost =
                post.author &&
                post.story_title &&
                post.story_url &&
                post.created_at;
              console.log(isValidPost);
              if (isValidPost) {
                return <Card key={i} post={post} />;
              } else {
                return null;
              }

is there a better way to make this validation?