I have done mapping but it doesn't look good. Can someone advice me on this?
Please advice.
0
Add a comment
|
1 Answer
Try this :
class App extends Component {
render() {
const titleArray = uniq(data.map((item) => item.name.slice(0, 1)));
const peopleData = titleArray.map(item => {
return {
[item]: data.filter((people) => people.name[0] === item)
};
});
return (
<div className="app-directory-container">
<div className="app-directory">
{titleArray.map(item => {
return (
<Fragment key={uniqueId()}>
<div key={uniqueId()} className="app-directory-separator">{item}</div>
{peopleData.map((people) => {
return (
<Fragment key={uniqueId()} >
{!isEmpty(people[item]) && people[item].map((item3) => {
return (<div className="app-directory-item"> {item3.name} </div>)
})}
</Fragment>
)})}
</Fragment>
);
})}
</div>
</div>
);
}
}
the <div className="app-directory-item"> should be inside your map.
Working stackblitz
2 Comments
arunmmanoharan
Is there any way I can refactor the code to be even simpler?
Alex
I think that item.name.charAt(0) would 'look better' then .slice() codeshare.io/aV0wYO In this example I also used forEach()