So i have a <Modal/> which is controlled by a state Visible, i want to be able to change the state of this modal from a dropdown menu inside a table row from Antd using SetVisible but i cannot find a way to do it, any suggestions?
<Table // antd table
loading={Boolean(!data)}
rowKey={'id'} expandable={expandable}
pagination={{pageSize: 5}}
columns={columns}
dataSource={data}
/>
render: (text, record) => ( // fragment from column object, which contain in column that'll be rendered
<Space size="middle">
<Dropdown overlay={() => DropMenu()}> //Where the dropdown compoennt is being called
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
Mais Opções <DownOutlined />
</a>
</Dropdown>
</Space>
const DropMenu = () => { //Dropdown Component
return (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"> // Here I'll trigger the modal
trigger modal
</a>
</Menu.Item>
</Menu>
)
};
I actually realized that antd has a Modal.confirm() which is a function that renders a confirmation modal with an ok and cancel button which you handle your own way.
<Menu.Item danger>
<span onClick={() => confirm({id: record.id})}>Delete</span>
</Menu.Item>
function confirm({name, id}) {
Modal.confirm({
title: 'Confirm',
icon: <ExclamationCircleOutlined />,
content: 'Are you sure you want to delete this user??',
okText: 'Confirmar',
cancelText: 'Cancelar',
onOk: (close) => { ...handling deletion }
)}
}
you can also try
<Menu
items={[
{
key: 1,
label: <div onClick={() => edit()}>edit</div>,
},
]}
/>
Related
when use Material UI button as link component, first time pass props type as any onClick={(e: any) => { after changes as per below but when that code deploy in github than facing issue like ss
<Button
component={Link}
onClick={(e: React.MouseEvent<HTMLElement>) => {
setMenuHovered(false);
logClicked(
LinkClickedEventNames.NavigationLink,
pageType,
(e.target as HTMLElement).innerText,
InteractionLocations.Header,
{
to: '/home',
lang: i18n.language
}
);
}}
to="/home"
className={`${classes.kitTile} bg-bottom bg-cover `}
style={{
background: `url(${require('assets_2/images/header/home.jpg')})`
}}
>
<div>
<div>
<Trans>your</Trans>
</div>
<div>
<Trans>Home</Trans>
</div>
</div>
</Button>
enter image description here
I am using react table 7.0 , How can i add and iconColumn , and on click of that , need to show an dropdown.
{
Header: "",
accessor: "actionColumn",
disableSortBy: true,
Cell: ({ original }) => (
<div className="cursor__pointer ">
<Icon className="padding5" iconName="RemoveLink" aria-hidden="true" />
</div>
)
},
I am able to render an icon on the column like above. How can i render a dropdown on click of it ?
Here's an example, how to do this with this simple #trendmicro-frontend/react-dropdown library:
{
Header: "",
accessor: "actionColumn",
disableSortBy: true,
Cell: ({ original }) => (
<div className="cursor__pointer ">
<Dropdown
onSelect={(eventKey) => {
}}
>
<Dropdown.Toggle btnStyle="link" noCaret
>
<Icon className="padding5" iconName="RemoveLink" aria-hidden="true" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem header>Header</MenuItem>
<MenuItem eventKey={1}>link</MenuItem>
<MenuItem divider />
<MenuItem header>Header</MenuItem>
<MenuItem eventKey={2}>link</MenuItem>
</Dropdown.Menu>
</Dropdown>
</div>
)
},
A working example here:
https://codesandbox.io/s/distracted-leftpad-c6onr?file=/src/App.js
My objective is to pass the id for handleClick function, If i click on the 3 dots of the respective card then it should reflect particular card id. Can anyone help me in giving id for handle Click arrow function.
Here is the code:
state = { menu: null };
handleClick = (e) => {
this.setState({ menu: e.target });
};
handleClose = () => {
this.setState({ menu: null });
};
{Data.map(user => (
<CardHeader
key={user.id}
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div className={this.state.menu && classes.menu}>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
style={{ marginTop: "35px" }}
id="simple-menu"
keepMounted
anchorEl={this.state.menu}
open={Boolean(this.state.menu)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>View</MenuItem>
<MenuItem onClick={this.handleClose}>hide</MenuItem>
</Menu>
</div>
}
title={user.title}
subheader={user.subheader}
/>
))}
here is the sample one
You can bind the function and pass the id to it. Like
handleClick = (id, e) => {
console.log(id)
this.setState({ menu: e.target, id: id });
};
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick.bind(this, user.id)}
>
<MoreVertIcon />
</IconButton>
or instead of binding the function you can create a new arrow function and pass the id like this:
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={(e) => this.handleClick(user.id, e)}
>
<MoreVertIcon />
</IconButton>
You can save the id in states and then use it in the menu component to perform further actions
Here is a trick solution for that kind of situations. Also this is most performant solution. You won't need to create arrow function instance for every re-render or each React node.
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
data-user-id={user.id} // Define your user id as native data attribute
>
And then get data attribute of your current clicked element.
handleClick = (e) => {
const { userId } = e.currentTarget.dataset; // Get your data-user-id value as string
console.log(Number(userId));
this.setState({ menu: e.target, id: Number(userId) }); // Convert to number and save to state
};
So you can create your own scenarios up to your depends.
In this case, also you might want to learn event bubbling logic to understand the difference between target and currentTarget use case.
Also you can check it out for more information about data-* attributes.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
I am using react hooks, and I have erased out other functions not associated with the function I am intending to call. The App functions are rendered
function App() {
const memoizedCallback = React.useCallback(() => {
console.log("Click happened");
}, []);
return (
<div className="App">
<ReactMapGl
{...viewport}
mapboxApiAccessToken={accesstoken}
onViewportChange={viewport => {
setviewport(viewport);
}}
>
{details.map(details => (
<Marker
key={details.name}
latitude={details.lat}
longitude={details.long}
>
<button
class="marker-btn"
onClick={e => {
e.preventDefault();
useselectedpark(details);
}}
>
<img src={icon} alt="icon" className="navbar-brand" />
</button>
</Marker>
))}
{selectedpark ? (
<Popup
latitude={selectedpark.lat}
longitude={selectedpark.long}
onClose={() => {
useselectedpark(null);
}}
>
<div>
<Card style={{ width: "18rem" }}>
<Card.Body>
<Card.Title>{selectedpark.name}</Card.Title>
<Card.Text>{selectedpark.postalcode}</Card.Text>
<div>
<Button variant="primary" onClick={memoizedCallback}>
Visit Gallery
</Button>
</div>
</Card.Body>
</Card>
</div>
</Popup>
) : null}
{console.log("in render", details)}
</ReactMapGl>
</div>
);
}
export default App;
the function I am intending to call is memoizedCallback. The function is called in an onClick of a button within a card.
The sequence of events is as such. A popup appears, and the user has an option to click on a button within the card that appears.
Problem: Currently, when the button is clicked right now, the function memoizedCallback is not called.
Why is that so, what did I miss here?
I wanna change my layout between grid and list with 2 buttons. I am very new to react, and I thought to use State, my button logic seems to work(when i console.log) but I don't know how to change div classNames based on State. I tried something but it doesnt work(see below). Whatever button I click grid or list my style changes but only for the first click, then nothing happens.
const Restaurants = () => {
const [isGrid, layoutToggle] = useState({
value: true
});
console.log(isGrid);
return (
<div className="restaurants">
<button onClick={() => layoutToggle({ isGrid: true })}>
Grid
</button>
<button onClick={() => layoutToggle({ isGrid: false })}>
List
</button>
<div className={isGrid["value"] ? "layout-grid" : "layout-list"}>
{restaurants.map(restaurant => (
<Restaurant/>
))}
</div>
</div>
);
};
The problem is in the button elements, You should the change the state with the value property not the isGrid property.
<button onClick={() => layoutToggle({ value: true })}>
Grid
</button>
<button onClick={() => layoutToggle({ value: false })}>
List
</button>