Creating a Material UI component with tabs for seperate admin lists

[james_g2001]

I am trying to create a parent and child component that has two tab menu for different parts of an admin access control feature. I have my schools and users loaded into my Redux store on the front-end and a seperate ‘dataGrid’ child component to go into it.

Do I need to keep the data store on the front end and just render the dataTable and add the data using the .map feature of React? or do I have to create seperate datatable child functions and populate them in their own components?

function AdminAccessControl(props) {

    const { children, index, ...other } = props;

    // select user object from redux
    const user = useSelector(state => state.user);

    // select school object from redux
    const school = useSelector(state => state.diveSchool);

    const [value, setValue] = React.useState(0);

    const classes = useStyles;

    const [role, setRole] = useState({
        userRole: "",
    });

    const handleChange = (property) => (e) => {
        setRole({
            // override the changed property and keep the rest
            ...role,
            [property]: e.target.value,
        });
    }

    const handleTabChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <Container className="wrapper">
        <div className={classes.demo2}>
            <StyledTabs
                value={value}
                onChange={handleTabChange}
                indicatorColor="primary"
                textColor="primary"
                aria-label="styled tabs example"
                centered>
                    <StyledTab label="User Access Control" >
                        <Grid>
                            <DataTable />
                        </Grid>
                    </StyledTab>
                    <StyledTab label="Scuba School Access Control" >
                        <Grid>
                            <DataTable />
                        </Grid>
                    </StyledTab>
            </StyledTabs>
            <Typography className={classes.padding} />
        </div>
        </Container>
    );
}

function mapStateToProps(state){
    const { user } = state.auth;
    const { school } = state.diveSchool;
    return {
        user,
        school,
    };
}

export default compose(
    connect(
        mapStateToProps,
    ),
    // withStyles(useStyles)
)(AdminAccessControl);

dataTable

export default function DataTable() {
    
    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection  />
        </div>
    );
}