I can´t figure it out how to pass id as a prop in SimplePopper component.
I have this table:
<TableBody>
{PostData.map((list, index) => (
<TableRow key={index}>
<TableCell>{list.first_name}</TableCell>
<TableCell>{list.last_name}</TableCell>
<TableCell><SimplePopper key="{list.id}" /></TableCell>
</TableRow>
))}
</TableBody>
I want to pass id to SimplePopper:
function PostPopover() {
return (
<div>
{PostData.map((list, index)=>{
return <div key="id"> {list.email} </div>
})}
</div>
)
}
export default function SimplePopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick} color="primary">
Show email
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<div className={classes.paper}><PostPopover />.</div>
</Popper>
</div>
);
}
This is PostData data structure:
[{"id":1,
"first_name":"Geraldine",
"last_name":"Graal",
"email":"ggraal0#indiegogo.com"},
{"id":2,
"first_name":"Farris",
"last_name":"Sowten",
"email":"fsowten1#blogger.com"}]
I know the mistake is in PostPopover because I got te full email list but no just the email related to the id, but can't figure it out why. Any idea?
You can just pass the id to ShowPopper as :
<ShowPopper id={list.id} />
Now you can access it in ShowPopper in props as:
const ShowPopper =(props) => {
console.log(props.id);
return <div>{props.id}</div>
}
Related
So I have those cards on the link right now. When the favorite button is clicked it will appear under FAVORITES. I wanted those cards under FAVORITES to be on the local storage, and when I "unfavorite" the cards, they should also be removed from the local storage. But how exactly do I do that? Should I use useEffect()?
Codesandbox: https://codesandbox.io/s/broken-fast-kgyzvc?file=/src/App.js
App.js
export default function App() {
const [all, setAll] = useState(true);
const [favorites, setFavorites] = useState(false);
const showAll = () => {
setAll(true);
setFavorites(false);
};
const showFavorite = () => {
setFavorites(true);
setAll(false);
};
const [dataSource, setDataSource] = useState(data);
const onFavorite = (cardId) => {
const newDataSource = [...dataSource];
const foundCardData = newDataSource.find((card) => card.id === cardId);
if (!foundCardData) return;
foundCardData.isFavorite = !foundCardData.isFavorite;
setDataSource(newDataSource);
};
return (
<div className="App">
<div className="button-group">
<button className={all ? "all active" : "all"} onClick={showAll}>
ALL
</button>
<button
className={favorites ? "favorites active" : "favorites"}
onClick={showFavorite}
>
FAVORITES
</button>
</div>
<br />
<Masonry
breakpointCols={3}
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
>
{all &&
dataSource.map((item) => (
<Cards
key={item.id}
text={item.text}
isFavorite={item.isFavorite}
onFavorite={() => onFavorite(item.id)}
/>
))}
{favorites &&
dataSource
.filter((item) => item.isFavorite === true)
.map((filtered) => (
<Cards
key={filtered.id}
text={filtered.text}
isFavorite={filtered.isFavorite}
onFavorite={() => onFavorite(filtered.id)}
/>
))}
</Masonry>
</div>
);
}
Cards.js
const Cards = ({ text, isFavorite, onFavorite }) => {
return (
<div className="cards">
<p>{text}</p>
<button onClick={onFavorite}>
{isFavorite ? "Added to Favorites!" : "Favorite"}
</button>
</div>
);
};
I have this Little list that should show different modals based on what the user select , and the problem is When I select the first time it doesn't work and I have to click on it again to work .
Here is my code :
const Mylist = props => {
const [open2, setOpen2] = React.useState(false);
const [open3, setOpen3] = React.useState(false);
const handleClose2 = () => {
setOpen2(false);
};
const handleOpen2 = () => {
setOpen2(true);
};
const handleClose3 = () => {
setOpen3(false);
};
const handleOpen3 = () => {
setOpen3(true);
};
const [isActive , SetIsActive] = useState(false);
const option =["Paid" , "UnPaid"]
return (
<div>
<i class="fas fa-ellipsis-v" onClick={(e) => SetIsActive(!isActive)}></i>
{isActive && (
<div>
{option.map((option) => (
<div
onClick={(e) => {
SetIsActive(false);
{option == 'Paid' && setOpen2(true)}
{option == 'UnPaid' && setOpen3(true)}
}}
>
{option}
</div>
))}
<Modal onClose={handleClose2} open={open2} >
<div>
Content
</div>
</Modal>
<Modal onClose={handleClose3} open={open3} >
<div>
Content
</div>
</Modal>
Your code block is a bit messy with some brackets and closing tags missing (possibly some of the code was not copied in by mistake?).
In any case, I did my best at trying to fill in the missing parts and did some refactoring to your code. I hope that fixes your bug!
import React, { useState } from 'react';
const MyList = (props) => {
const [isOpen1, setIsOpen1] = useState(false);
const [isOpen2, setIsOpen2] = useState(false);
const [isActive, setIsActive] = useState(false);
const openOption = (option) => {
setIsActive(false);
if (option === "Paid") {
setIsOpen1(true);
}
if (option === "UnPaid") {
setIsOpen2(true);
}
};
const options =["Paid", "UnPaid"]
return (
<div>
<i class="fas fa-ellipsis-v" onClick={() => setIsActive(!isActive)}></i>
{isActive && (
<div>
{options.map((option) => (
<div onClick={() => openOption(option)}>
{option}
</div>
))}
</div>
)}
<Modal onClose={() => setIsOpen1(false)} open={isOpen1} >
<div>
Content
</div>
</Modal>
<Modal onClose={() => setIsOpen2(false)} open={isOpen2} >
<div>
Content
</div>
</Modal>
</div>
);
};
i trying to make a history.push on button click
i have this search bar that will show the names of doctors when serched {suggestion.firstname}
i am trying to pass {suggestion.id } as url when cliked on the li corresponding
but here when i type and if the {suggestion.firstname} first letter comes then it automaticaly is redirecting when typing in the input field.
finddoctor is working like onchange funtion but i have written onclick funtion
function finddoctor(e) {
console.log(e);
history.push(`/detiled/${e} `);
}
const onChange = (event) => {
const value = event.target.value;
setInputValue(value);
setShowResults(false);
const filteredSuggestions = suggestions.filter(
(suggestion) =>
suggestion.firstname
.toString()
.toLowerCase()
.includes(value.toLowerCase()) ||
suggestion.id.toString().toLowerCase().includes(value.toLowerCase())
);
setFilteredSuggestions(filteredSuggestions);
setDisplaySuggestions(true);
};
const onSelectSuggestion = (index) => {
setSelectedSuggestion(index);
setInputValue(filteredSuggestions[index]);
setFilteredSuggestions([]);
setDisplaySuggestions(false);
};
const SuggestionsList = (props) => {
const {
suggestions,
inputValue,
onSelectSuggestion,
displaySuggestions,
selectedSuggestion,
} = props;
if (inputValue && displaySuggestions) {
if (suggestions.length > 0) {
return (
<ul className="suggestions-list" style={styles.ulstyle}>
{suggestions.map((suggestion, index) => {
const isSelected = selectedSuggestion === index;
const classname = `suggestion ${isSelected ? "selected" : ""}`;
return (
<>
<li
style={styles.listyle}
onClick={finddoctor(suggestion.id)}
key={index}
className={classname}
>
{suggestion.firstname}
</li>
</>
);
})}
</ul>
);
} else {
return <div>No suggestions available...</div>;
}
}
return <></>;
};
useEffect(() => {
axios
.get("admin-panel/all-doctors-list/")
.then((res) => {
const data = res.data;
setShowSerch(data);
});
}, []);
return (
<>
<div className="note-container" style={styles.card}>
<div style={styles.inner}>
<p style={{ textAlign: "left" }}>Search Doctors</p>
<form className="search-form" style={{}}>
{showResults ? (
<FontAwesomeIcon
style={{ marginRight: "-23px" }}
icon={faSearch}
/>
) : null}
<input
onChange={onChange}
value={inputValue}
style={styles.input}
type="Search"
/>
<SuggestionsList
inputValue={inputValue}
selectedSuggestion={selectedSuggestion}
onSelectSuggestion={onSelectSuggestion}
displaySuggestions={displaySuggestions}
suggestions={filteredSuggestions}
/>
</form>
</div>
</div>
</>
);
};
change it do this, and it should work.
<li
style={styles.listyle}
onClick={() => finddoctor(suggestion.id)}
key={index}
>
{suggestion.firstname}
</li>
My modal causes a crash whenever I close it. The modal contains picture details and is displaying them.
The error message I am getting is:
"TypeError: Cannot read properties of undefined (reading 'name')"
Although the above prop worked fine while the modal was open. A thing I noted is that whenever the modal contains only the below paragraph with the id, it works fine and closes without any issues.
<p>{modalContent.id}</p>
Where the FavoritesModal gets its props
const FavoritesSidebar = () => {
const [modalOpen, setModalOpen] = useState(false)
const [modalContent, setModalContent] = useState(null)
const favoriteList = useSelector((state) => state.favoriteList)
const toggleModal = (arg) => {
setModalOpen(!modalOpen)
setModalContent(arg)
}
return (
<Container className="favorites-sidebar">
{/* {modalContent ? <p>yes</p> : <p>no</p>} */}
{favoriteList.length > 0 ? <h4>Your favorited pictures</h4> : null}
{favoriteList.length > 0 &&
favoriteList.map((item) => (
<Row key={item.id} className="favorite-item">
<Col onClick={() => toggleModal(item)}>
</Col>
</Row>
))}
{modalContent ? (
<FavoritesModal
modalOpen={modalOpen}
modalContent={modalContent}
toggleModal={toggleModal}
/>
) : null}
</Container>
)
}
export default FavoritesSidebar
FavoritesModal
const FavoritesModal = (props) => {
const { modalOpen, modalContent, toggleModal } = props
const dispatch = useDispatch()
if (modalContent)
return (
<Modal
isOpen={modalOpen}
toggle={toggleModal}
centered
fullscreen=""
size="xl"
>
<ModalHeader>
<p>
{modalContent.description !== null
? `${modalContent.description} by ${modalContent.user.name}`
: `Taken by: ${modalContent.user.name}`}
</p>
<p>{modalContent.id}</p>
</ModalHeader>
<ModalBody>
<img src={modalContent.urls.regular} alt={modalContent.description} />
</ModalBody>
<ModalFooter>
<Button
color="danger"
onClick={() => dispatch(removeFromFavorites(modalContent.id))}
>
Remove from favorites
</Button>
</ModalFooter>
</Modal>
)
else return null
}
export default FavoritesModal
Rewriting the toggleModal functioned solved the issue
const toggleModal = (arg) => {
if (modalOpen) {
setModalOpen(!modalOpen)
setModalContent(null)
} else {
setModalOpen(!modalOpen)
setModalContent(arg)
}
}
I have a table list with first name, last name and email. The email section is a clickable popover SimplePopper:
<TableCell>{list.first_name}</TableCell>
<TableCell>{list.last_name}</TableCell>
<TableCell><SimplePopper /></TableCell>
I'd like the popover to only display the email related to the id at the row level, but at the moment it displays all emails. Is there a simple way to pass something on <SimplePopper /> so I see the related emails to each first and last name?
SimplePopper calls this function:
function PostPopover() {
return (
<div>
{PostData.map((list, index)=>{
return <div>
{list.email}
</div>
})}
</div>
)
}
Edit: added SimplePopper code
function PostPopover() {
return (
<div>
{PostData.map((list, index)=>{
return <div>
{list.email}
</div>
})}
</div>
)
}
const useStyles = makeStyles((theme) => ({
paper: {
border: '1px solid',
padding: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
},
}));
export default function SimplePopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick} color="primary">
Show email clicking here
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<div className={classes.paper}><PostPopover />.</div>
</Popper>
</div>
);
}
Edit: PostData structure (1,000 fake records)
[{"id":1,
"first_name":"Geraldine",
"last_name":"Graal",
"email":"ggraal0#indiegogo.com"},
{"id":2,
"first_name":"Farris",
"last_name":"Sowten",
"email":"fsowten1#blogger.com"}]