reusing array.map() in React.js - reactjs

Question

I can't find an answer in "many similar questions", sorry I'm new to react.
I have the following code inside return of my sfc that works/renders fine:
{data && allToDos && completed === 'all' && data.map(data => {
key++;
return (
<div key={key}>
<h2>{data.title}</h2>
<p className="apart">
Nr: {data.id} <span>Status: {!data.completed && <span>Not </span>}completed</span>
</p>
<h3>User: {data.userId}</h3>
<br/><hr/><br/>
</div>
);
});}
Now, I have 3 different options for completed and in each case i want to render different set of data, so i have isolated the data.map(data => {/*code*/}) into a separate function inside the same component,like that:
const dataMap = () => {
data.map(data => {
key++;
return (
<div key={key}>
<h2>{data.title}</h2>
<p className="apart">
Nr: {data.id} <span>Status: {!data.completed && <span>Not </span>}completed</span>
</p>
<h3>User: {data.userId}</h3>
<br/><hr/><br/>
</div>
);
});
}
and then i passed that function inside return like that:
{data && allToDos && completed === 'all' && dataMap()}
and nothing is rendered, but no error messages either.

Answer 1

You're not returning from dataMap() function it returns undefined .
try this
const dataMap = () => {
return data.map(data => {
key++;
return (
<div key={key}>
<h2>{data.title}</h2>
<p className="apart">
Nr: {data.id} <span>Status: {!data.completed && <span>Not </span>}completed</span>
</p>
<h3>User: {data.userId}</h3>
<br/><hr/><br/>
</div>
);
});
}