I am using material UI for UI, and Axios to fetch data as JSON from an API endpoint. I have been successful in sorting/ filtering/ mapping the users the way I want and displaying them on the table. There are 1000 users btw.
on clicking a LI, I would like the checkbox toggle to turn on and off. The ID's of the selected user has to console.log on the console. How can I write such a function? This should work with multiple LI's as well. I can select as many LI's as I want and they should all console.log
PS- as a bonus, I would also like to display the user email when I click a particular checkbox, inside the table. Toggle it on/ off Should I use Checkbox from the material-UI library, and use an onChange to show the {user.email} in a styledTableCell component?
so how about I write a state?
const [showEmail, setShowEmail]= useState(false);
const handleClick=()=>{
showMe= !this.state.showMe
}
on onChange i want to show {user.email} In a styledtablecell, so..
onChange={()=> onChange(setShowMail(????)}
but Where? on Checkbox? or inside styledtablecell. If inside styledtablecall how do I connect it with checkbox property?
this is where I' am confused
this is my render in App.js below-
import React, { Component, useState, useEffect } from "react";
import axios from "axios";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Avatar from "@material-ui/core/Avatar";
import Checkbox from "@material-ui/core/Checkbox";
const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}))(TableCell);
const StyledTableRow = withStyles((theme) => ({
root: {
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover,
},
},
}))(TableRow);
const useStyles = makeStyles({
table: {
minWidth: 700,
},
});
const App = () => {
const classes = useStyles();
const [users, setUsers] = useState([]);
const [search, setSearch] = useState("");
const getUserData = async () => {
try {
const data = await axios.get(
//my json file structure. not attaching link due to privacy. 1000 users// users=[
{
"id":1,
"first_name":"Suzie",
"last_name":"something",
"email":"jkshr.r@gmail.com",
"gender":"Female",
"Avatar":"https://..."
},
]
);
console.log(data.data);
setUsers(data.data);
} catch (e) {
console.log(e);
}
};
useEffect(() => {
getUserData();
}, []);
return (
<div className="App">
<input
type="text"
placeholder="search here..."
onChange={(e) => {
setSearch(e.target.value);
}}
/>
<TableContainer component={Paper} justify="center">
<Table className={classes.table} aria-label="customized table">
<TableHead>
<TableRow>
</TableRow>
</TableHead>
<TableBody>
{users
.sort(function (a, b) {
if (a.last_name < b.last_name) {
return -1;
}
if (a.last_name > b.last_name) {
return 1;
}
return 0;
})
.filter((user) => {
if (search == "") {
return user;
} else if (
user.first_name
.toLowerCase()
.includes(search.toLowerCase()) ||
user.last_name.toLowerCase().includes(search.toLowerCase())
) {
return user;
}
})
.map((user) => {
return (
<StyledTableRow key={user.id}>
<StyledTableCell component="th" scope="row" align="left">
<Avatar>{user.avatar}</Avatar>
</StyledTableCell>
<StyledTableCell >
{user.first_name} {user.last_name}
</StyledTableCell>
<Checkbox/>
</StyledTableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</div>
);
};
export default App;
Thanks for all of your tips.
