I tried to assign div side by side in my react website. However,I received the error Uncaught Invariant Violation: Minified React error.
This is my toolbar in my react website
let EnhancedTableToolbar = props => {
const { numSelected, classes ,deletefunc} = props;
return (
<Toolbar
className={classNames(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
User List
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
{numSelected > 0 ? (
<div>
<div style="width: 100px; float:right;">
<Tooltip title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>
</DeleteIcon>
</IconButton>
</Tooltip>
</div>
<div style="width: 100px; float:right;">
<Tooltip title="Edit">
<IconButton aria-label="Edit">
<EditIcon>
</EditIcon>
</IconButton>
</Tooltip>
</div>
</div>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="Filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</div>
</Toolbar>
);
};
I received the error when I set the width to 100px and float to right in my delete button and edit button. The code will work if I never set the width and float. However,it div by up down instead of side by side. Anyone know how to solve this issue?
That is not how you define inline styles in JSX.
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string.
Try this instead:
<div style={{ width: '100px', float: 'right' }}>
Related
I have a problem because my component keeps rerendering while I'm toggling it.
I have an arrow(up/down) that will show/hide a part of the div.
I wrote console.log('render') to see if its rerendering. I'm only toggling one div at a time but it is rerendering multiples times. How do I fix this?
CODESANDBOX --------> CODESANDBOX
const toggleArrow = (
<IconButton
aria-label="delete"
size="large"
onClick={() => {
handleProductCard(productIndex);
productCardRef.current.scrollIntoView({
behavior: "smooth"
});
}}
sx={{ padding: 0 }}
>
{formik.values.hideProductCard ? (
<KeyboardArrowDownIcon size="large" />
) : (
<KeyboardArrowUpIcon size="large" />
)}
</IconButton>
);
I have a component which i have imported into another component. When I click the component, the onclick function refuses to run.
This is the code for the component
const HomeFeedCard = ({ name, image, published, quantity, weight }) => {
const classes = useHomeFeedCardStyles()
return (
<Grid item xs={6} md={3} sm={4} lg={3}>
<Paper elevation={5}>
<img src={image?.url} alt='Product' className={classes.image} />
<div className={classes.container}>
<Avatar
alt='image'
src='https//user.png'
sx={{ width: 56, height: 56, mr: 1 }}
/>
<div className={classes.textContainer}>
<Typography variant='h6' component='body'>
<LinesEllipsis text={` ${name}`} />
</Typography>
<Typography>{`${quantity} left | ${weight}KG`}</Typography>
</div>
</div>
</Paper>
</Grid>
)
}
THIS IS THE function that runs the onClick function. The console returns nothing
<HomeFeedCard
key={product._id}
name={product.productName}
published={product.published}
image={product.images[0]}
quantity={product.quantity}
weight={product.weight}
onClick={() => console.log('product', product.productName)}
/>
Your onClick is not defined in your function HomeFeedCard.
const HomeFeedCard = ({ name, image, published, quantity, weight, onClick }) => {
return (
<div onClick={onClick} />
)
}
If you don't know which properties you want to set use: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
In the HomeFeedCard, you are not expecting an onClick function as a prop.
You need to explicitly bind the onClick to an actual element. You can wrap content inside HomeFeedCardwith adiv`.
OR, pass onClick further to Grid if accepts a click handler.
const HomeFeedCard = ({
name,
image,
published,
quantity,
weight,
onClick
}) => {
const classes = useHomeFeedCardStyles();
return (
<div onClick={onClick}>
<Grid item xs={6} md={3} sm={4} lg={3}>
<Paper elevation={5}>
<img src={image?.url} alt="Product" className={classes.image} />
<div className={classes.container}>
<Avatar
alt="image"
src="https//user.png"
sx={{ width: 56, height: 56, mr: 1 }}
/>
<div className={classes.textContainer}>
<Typography variant="h6" component="body">
<LinesEllipsis text={` ${name}`} />
</Typography>
<Typography>{`${quantity} left | ${weight}KG`}</Typography>
</div>
</div>
</Paper>
</Grid>
</div>
);
};
<HomeFeedCard
key={product._id}
name={product.productName}
published={product.published}
image={product.images[0]}
quantity={product.quantity}
weight={product.weight}
onClick={() => console.log("product", product.productName)}
/>
I'm new in reactjs, I have main page
<div >
<AppBar position="flex" style={{backgroundColor:'#1A437E'}}>
<Toolbar>
<IconButton edge="end" color="inherit" aria-label="menu">
<img alt="open menu" height="57" width="50" border="0" src={ico7} />
</IconButton>
</Toolbar>
</AppBar>
<Drower/>
</div>
And this is my Drawer
<div>
<Drawer anchor='right' open={this.state.open}>
<List>
<ListItem>
<ListItemIcon/>
</ListItem>
</List>
</Drawer>
</div>
How can I open and close the drawer?
Use below code for IconButton click
onClick={()=>{
this.setState(state => ({
open: !state.open
}));
}}
To open/close the Drawer you need to toggle the value of this.state.open in your state. Like so:
<div>
<button onClick={() => this.setState({ open: !this.state.open }))} >Open / Close Drawer </button>
<Drawer anchor='right' open={this.state.open}>
<List>
<ListItem>
<ListItemIcon/>
</ListItem>
</List>
</Drawer>
</div>
i have a cards.js which has the following function. Now the calling method passes three values . header1, header2 and Link (this is the *.js page that has to be called)
export default function Cards(props) {
const classes = useStyles();
return (
<div className="App">
<Card className={classes.card} variant="outlined">
<CardContent>
<Typography
variant={"h5"}
gutterBottom
>
{props.header1}
</Typography>
<Typography
variant={"caption"} >
{props.header2}
</Typography>
<Divider className={classes.divider} light />
<Button variant="contained" color="secondary" onClick={()=> (call either link1.js or link2.js )}>
Lets goooooo!
</Button>
</CardContent>
</Card>
</div>
);
}```
calling method
class UIM extends Component {
render() {
return (
<div className="text-page">
<Grid container alignItems="center" justify="space-evenly" >
<Grid ><Cards header1="card 1 for a task1" header2="click text2" link="link1"/></Grid>
<Grid ><Cards header1=" card 2 for task 2" header2=" click text 2" link="link2"/></Grid>
</Grid>
</div>
)
}
}
I am new to react and learning right now, so wondering if such a thing is possible or should i use router to route to different pages (ie. call either link1.js or link2.js ) ??
I found out by by adding pathname:props.link i can get the button to link to multiple locations within the material ui button.
<Card className={classes.card} variant="outlined">
<CardContent>
<Typography
variant={"h5"}
gutterBottom
>
{props.header1}
</Typography>
<Typography
variant={"caption"} >
{props.header2}
</Typography>
<Divider className={classes.divider} light />
<Button variant="contained" color="secondary">
<NavLink to={{pathname:props.link}}>Lets goooooo!</NavLink>
</Button>
</CardContent>
</Card>
I have the following React code:
render() {
return (
<NavItem dropdown toggleOnHover className='collapse-left'>
<DropdownButton nav>
<Icon bundle='fontello' glyph='bullhorn' />
{this.getBadge()}
</DropdownButton>
<Menu alignRight ref='bullhorn-menu' id='notifications-menu' className='double-width' alwaysInactive>
<MenuItem header>
<Entity entity='Notifications' />
</MenuItem>
{this.state.notifications.map((item, index) => {
return (
<Notification notification={item} key={index} />
)
})}
<MenuItem noHover>
<Grid collapse style={{marginBottom: -10}}>
<Row>
<Col xs={12} collapseLeft collapseRight>
<Button block className='notification-footer-btn left-btn'>MARK ALL READ</Button>
</Col>
</Row>
</Grid>
</MenuItem>
</Menu>
</NavItem>
)
}
The code above doesn't work, because it throws:
react-with-addons.js:9729 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
However, when I surround the map() statement with a div, it works, but that breaks the layout.
The Notification component just returns something like this:
<MenuItem href='/'>
<Grid>
<Row>
<Col xs={2} className='avatar-container' collapseRight>
<div><img src='/imgs/avatars/avatar22.png' width='40' height='40' alt='sarah_patchett' /></div>
<div className='text-center'>
<BLabel bsStyle='info'>NEW</BLabel>
</div>
</Col>
<Col xs={10} className='notification-container' collapseLeft collapseRight>
<div className='time'>
<strong className='fg-darkgray50'><Icon bundle='fontello' glyph='chat-5'/><em><Entity entity='notificationsTimeFirst' /></em></strong>
</div>
<div className='message-header'>
<strong className='fg-darkgreen45'>Sarah Patchett sent you a private message</strong>
</div>
<div className='message-details fg-text'>
<span>{"Hey Anna! Sorry for delayed response. I've just finished reading the mail you sent couple of days ago..."}</span>
</div>
</Col>
</Row>
</Grid>
</MenuItem>
Can someone tell me how to just loop over my array and render the Notification component, without the surrounding div?
Currently it is not possible to return multiple components like that, so you need to wrap them in something.
Why don't you just change the style of the container so that it doesn't break the layout?
For example:
<div style={{ display: "inline" }}>
{this.state.notifications.map((item, index) => {
return (
<Notification notification={item} key={index} />
)
})}
</div>
Alternatively, you could do this:
let menuItems = [
<MenuItem header key="header">
<Entity entity='Notifications' />
</MenuItem>
].concat(notifications);
return <Menu>
{ menuItems }
</Menu>;
Now the contents of the menu is an array, so every item needs a key.