map/filter data cwiczenie

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
// import * as serviceWorker from './serviceWorker';
import data from './App';
console.log(data);


const Item = ({item}) => {
    return (
        <>
        <h1>Uzytkonik nr {item.id}</h1>
        <p>{item.name}</p>
        <p>{item.email}</p>
        </>
    )
}

class ListItem extends React.Component{
    render(){
        let female =  data.users.filter(item => item.username.endsWith('a'));
        let male = data.users.filter(item => !item.username.endsWith('a'));
        return (
            <>
            <div>
                <h1>Wszyscy uzytkownicy</h1>
                <ul>
                    {data.users.map(item => <Item key={item.id} item={item}/>)}
                </ul>
            </div>
            <div>
                <h1>Tylko kobiety</h1>
                <ul>
                {female.map(item => <Item key={item.id} item={item}/>)}
                </ul>
            </div>
            <div>
                <h1>Faceci</h1>
                <ul>
                {male.map(item => <Item key={item.id} item={item}/>)}
                </ul>
            </div>
            </>
        )
    }
}

ReactDOM.render(<ListItem/>,document.getElementById('root'))