I'm have a map nested with a map, and the nested map has an if statement. However it's not working because I need to reference a value from the outter mapped element. I'm not sure the proper syntax. I've tried many wrong things, lol.
How do I reference section.name from the outer element in the nested maps's if statement? I'm not getting any errors, it just doesn't work.
<Container>
{this.state.sections.map(section => (
<Accordion className="my-5" key={section.id} id={section.id}>
<Card key={section.id} id={section.id} name={section.name}
style={{ background: this.state.color1, color: this.state.color2 }}>
<Accordion.Toggle as={Card.Header} eventKey={section.id}>
Section {section.id}: {section.name}
</Accordion.Toggle>
<Accordion.Collapse eventKey={section.id}>
<Card.Body style={{ background: 'white', color: 'black' }}>
<ButtonGroup size="sm" className='buttons'>
{this.state.policies.map(policy => {
if(this.state.section === 'Culture'){
return
<PolicyButton key={policy.id} id={policy.id} policy=
{policy.policy} onAddPolicy={this.handleAddPolicy} />
}
})}
</ButtonGroup>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
))}
</Container>
Related
I am trying to center some cards inside a row element but I cant get it to work!
<Row className="d-flex justify-content-center">
{cardData.map((data) => {
return (
<Col>
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={data.img} />
<Card.Body>
<Card.Title>{data.title}</Card.Title>
<Card.Text>{data.text}</Card.Text>
<Button variant="primary">{data.button}</Button>
</Card.Body>
</Card>
</Col>
);
})}
</Row>
this is how it looks:: (as you can see, there is un-event spacing on the left and right of the card
I tried to put the following classes (mx-auto,d-flex justify-content-center) on the parent row but I cant get it to work
any advice is greatly appreciated
use justify-content: space-between
<Row style={{display:'flex', justifyContent: 'space-between'}}>
I'm trying to make ListItems inside a List draggable without changing too much structure, it seems to work but the styling is very off:
The icons and its names should be on one line but for some reason the <ListItemText> keeps being shoved into the next line when it shouldn't be. Here's my draggable code:
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" direction="vertical">
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{menuList.map((text, index) => (
<Draggable key={text} draggableId={text} index={index}>
{(provided) => (
<ListItem key={text} disablePadding}}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}>
<IconButton id={text} onClick={handleFav} disableRipple sx={{
minWidth: 0,
maxWidth: 1,
mr: 1,
justifyContent: 'center',
}}>
<StarRateRoundedIcon/>
</IconButton>
<IconButton sx={{ padding: 0, mr: 1 }}>
<VisibilityIcon sx={{ position: 'relative', verticalAlign: 'bottom', bottom: 1, color: '#00417d' }} />
</IconButton>
<ListItemText primary={text} sx={{ width: '16px', margin: 0 }} />
</ListItem>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
I did something similar for table cells and the items were inline, but this one isn't. I've tried setting the ListItem iteself to inline but that didn't seem to fix it. It seems that there's a div that either belongs to the draggable or the listitem itself that isn't the right size, but I can't tell which one:
The ListItemText component was causing it to wrap into its own line. I couldn't find a way to stop the component itself so I decided to just ditch it for a normal typography component, it now looks like how I want:
If anyone knows how to achieve the same but with a normal ListItemText I'd also love to know. This is how I got around it with Typography for now:
<Typography display={'inline'}>{text}</Typography>
I usually using uuid from react-uuid but this time I get all time an error even I try to combine it with unique item.id..
<Swiper
{...params}
>
{listMovie?.map((item, index) =>{
const time = new Date(item.release_date)
return(
<React.Fragment key={`${item.id + uuid()}`}>
<SwiperSlide >
<Grid item className="items">
<Card sx={{ maxWidth: "350" }}>
<div className="favorite">
<IconContext.Provider
value={{ color: 'red', size: '30px' }}
>
<div className="fav" onClick={() => FavHanlder(item, index)}>
{likes.includes(item.id) ? <MdFavorite/> : <MdFavoriteBorder/>}
</div>
</IconContext.Provider> </div>
<Link to={`/movie/${item.id}`}>
<CardMedia
component="img"
height="350"
image={`${apiConfig.w500Image(item.poster_path)}`}
// alt={item.Title}
/>
<CardContent>
</CardContent>
</Link>
</Card>
<div className="title">
<Typography variant="body2" color="white" >
{item.original_title}
</Typography>
<Typography variant="body2" color="white" >
({time?.getFullYear()})
</Typography>
<div style={{display: "flex", float: "left", paddingLeft: "10px", paddingRight: "10px"}}>
<ReactStars
count={10}
value={item.vote_average}
size={10}
isHalf={true}
emptyIcon={<i className="far fa-star"></i>}
halfIcon={<i className="fa fa-star-half-alt"></i>}
fullIcon={<i className="fa fa-star"></i>}
activeColor="#ffd700"
/><p style={{fontSize: "5px"}}>/{item.vote_count}votes</p></div>
</div>
</Grid>
</SwiperSlide>
</React.Fragment>
)})}
</Swiper>
I am a little bit confused, because this is an error of beginners.
full msg:
Warning: Encountered two children with the same key, .0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
I am currently using react-infinite-scroll-component to paginate the comments from a certain post. There is a button in the comment section which shows a drawer that is supposed to show the paginated comments. The problem is, the react-infinite-scroll-component doesn't work, as it does not fire
the "next" function.
Here is the code:
<div>
<Drawer
anchor={"bottom"}
open={open}
onClose={handleDrawer}
style={{ height: "100vh", overflow: "auto", margin: "0px 4px" }}
>
<Toolbar>
<Typography variant="h4" style={{ flexGrow: 1 }}>
Comments
</Typography>
<IconButton onClick={handleDrawer}>
<CloseIcon />
</IconButton>
</Toolbar>
<Divider />
<br />
<CommentForm
comment={comment}
handleChange={handleChange}
handleSubmit={handleSubmit}
/>
<InfiniteScroll
dataLength={page}
next={More}
hasMore={hasMore}
loader={
<>
<br />
<CircularProgress />
</>
}
style={{
overflow: "hidden",
}}
scrollThreshold={1}
>
<CommentList comments={comments} id={session.id} />
</InfiniteScroll>
</Drawer>
</div>
The drawer is mostly similar to Youtube's comment drawer on the mobile app. Is there anything I am missing here?
Probably, the problem is the relation with Drawer and Infinite Scroll height. The height of Infinite Scroll is not reaching the right point to trigger next function. If you provide the demo in Codesandbox would be easier to understand.
Fixed height of infinite scroll container
<Box sx={{ height: 500 }}>
<InfiniteScroll
dataLength={page}
next={More}
hasMore={hasMore}
loader={
<>
<br />
<CircularProgress />
</>
}
style={{
overflow: "hidden",
}}
scrollThreshold={1}
>
<CommentList comments={comments} id={session.id} />
</InfiniteScroll>
</Box>
I made an create component that renders everything that looks good, but when I do console in browser, it has below error.
index.js:2178 Warning: Each child in an array or iterator should have
a unique "key" prop.
I tried to have the key props but still has this error. Please see my code below and advise! Thank you very much.
const serviceList = (props) => (
<CardBody style={{ backgroundImage: `url(${ServiceBgImg})` }}>
<div>
<h3 style={{ fontWeight: 'bold' }}
>{props.groupName}</h3>
{props.allServices.filter(groupedServices => groupedServices.category === props.groupName)
.map(serviceInfo =>
<List component='nav'>
<ListItem>
<ListItemText primary={
<div key={serviceInfo.id}>
<h5 style={{ fontWeight: 'bold' }}>
<span>{serviceInfo.service}</span>
<span
style={{ float: 'right' }}
>{serviceInfo.price}</span>
</h5>
<h5>
{serviceInfo.description}
</h5>
</div>
}
/>
</ListItem>
</List>
)
}
</div>
</CardBody>
);
export default serviceList;
Your List component should wrap the map function, and inside that you add the key to mapped ListItems:
<List component='nav'>
...
.map((serviceInfo, index) =>
<ListItem key={index}>
...
</ListItem>
....
The outermost/parent element returned by the map function needs to have a key prop. In your case, it is not the <div> but <List>, which seems to be a mistake as it seems you wanted to loop over a filtered result of allServices to create a list of serviceInfo. If that's the case, you should move the map function just above the <ListItem> and assign key prop to it.
Code example as follow:
const serviceList = (props) => (
<div>
<h3 style={{ fontWeight: 'bold' }}>{props.groupName}</h3>
<List component='nav'>
{props.allServices.filter(groupedServices => groupedServices.category === props.groupName).map(serviceInfo =>
<ListItem key={serviceInfo.id}>
<ListItemText primary={
<div key={serviceInfo.id}>
<h5 style={{ fontWeight: 'bold' }}>
<span>{serviceInfo.service}</span>
<span
style={{ float: 'right' }}
>{serviceInfo.price}</span>
</h5>
<h5>{serviceInfo.description}</h5>
</div>
}/>
</ListItem>)}
</List>
</div>);
export default serviceList;