my question is how to hide ant modal header
how to remove my modal section ?
the simple code is :
export default React.memo(() => {
return <Modal
width={800}
footer={<div/>}
>
</Modal>
});
i try to put header in property but not working
The header text can be changed via the title prop. If you don't want a title at all, you can pass an empty string.
export default React.memo(() => {
return (
<Modal
title=""
width={800}
footer={<div />}
>
</Modal>
);
});
As of right now it seems you can get rid of the top part by just not supplying a value to the "title" prop.
Related
Somewhat new to React.
I want to be able to toggle between React elements CreateUser, EditUser, and ListUser.
It would be great to have a clickable text that when selected pulls up that element and its
corresponding stuff. In the case of Create its a field with a save button.
What is the best way to have my CrudSelector class list all three texts, make them clickable and pull up the stuff inside toggling to the selected one at a time?
Welcome. Always a good idea to share code with your question.
You'll want to use some kind of state which tells your parent component which child component to show. Kind of like this in your React functional component:
const [ featureToShow, setFeatureToShow ] = useState('list')
return (
<>
{/* Show some buttons to change the state */}
<button onClick={() => setFeatureToShow('list')}>Show User List</button>
<button onClick={() => setFeatureToShow('create')}>Create User</button>
<button onClick={() => setFeatureToShow('edit')}>Edit User</button>
{/* Depending on what is in the state show that component */}
{ featureToShow === 'list' ? <ListUser /> : null }
{ featureToShow === 'create' ? <CreateUser /> : null }
{ featureToShow === 'edit' ? <EditUser /> : null }
</>
)
In reality you'll probably want to enable clicking on the user's name in ListUser to show the EditUser component.
const Buttons = () => {
return (
<>
<div>
<button
buttonType="submit"
disabled={form.hasValidationErrors || form.pristine}
>
Save
</button>
</>
);
};
export default Buttons;
I have used react-final-form to create form for my react form. But I want to implement a seperate component for submit button. I need to have access to pristine but it gives me an error as there is not any form here in new component.
Does anyone have any solution?
Have you tried send the form as a parameter to the Buttons component?
Also, I think you were missing a closing div in your code.
const Buttons = ({form}) => {
return (
<>
<div>
<button
buttonType="submit"
disabled={form.hasValidationErrors || form.pristine}
>
Save
</button>
</div>
</>
);
};
export default Buttons;
As I use Typescript I do not know what is the type of form which i want to send it through props to my Buttons component. Also, II do not know if this is a right solution or not. Or does react-final-form has anything to help solving the issue?
I am trying to get a react-bootstrap working for popover and overlaytrigger working. I have multiple buttons and like to call a function to get popover formatting for each button. I am getting the following error
"React.createElement: type is invalid -- expect a string"
I look at the react example over and over again, still stuck on this error
https://react-bootstrap.github.io/components/overlays/#popover-examples
here is my code so far
render() {
return (
<OverlayTrigger trigger="click" placement="top"
overlay={this.Overlay()}>
<Button>Test</Button>
</OverlayTrigger>
);
}
Overlay = () => {
const popover = (
<Popover id="1">
<Popover.Title as-"h3">Title One</Popover.Title>
<Popover.Content>Test Content
</Popover.Content>
</Popover>
);
return popover;
}
First of all this.Overlay() is incorrect becasue:
You are already calling the function, something like () => this.Overlay() or Overlay.bind(this) will make sense.
this has no property Overlay on it since it's defined outside.
Regarding the issue, your code seems fine, just a small typo as-"h3" should be as="h3" and make Overlay a const or optionally a function.
Example:
const Overlay = () => {
const popover = (
<Popover id="1">
<Popover.Title as="h3">Title One</Popover.Title>
<Popover.Content>Test Content</Popover.Content>
</Popover>
);
return popover;
};
class Example extends React.Component {
render() {
return (
<OverlayTrigger trigger="click" placement="top" overlay={Overlay}>
<Button>Test</Button>
</OverlayTrigger>
);
}
}
You can check it out in sandbox her: https://codesandbox.io/s/infallible-proskuriakova-jgkre
If Overlay is s functional component, you should use the tag instead of calling the function on OverlayTrigger. React will call the function when rendering the component.
Try
overlay={<Overlay/>}
That should work if you call a const instead of the function. I've managed to avoid the error but when the button is clicked, the popover is not being shown.
this is placed at the top of my React Component
<OverlayTrigger
trigger="click"
placement="top"
overlay={PopoverCustomer}>
<Button variant="secondary">OK</Button>
</OverlayTrigger>
and then I declare this const
const PopoverCustomer = () => (
<Popover>
<Popover.Title>
Title
</Popover.Title>
<Popover.Content>
Some content here
</Popover.Content>
</Popover>
);
I have an App component that renders a MenuBar component. In that MenuBar, I render ListItems (from material-ui) and pass the following as a prop:
onClick = (e) => {
const id = e.target.id;
console.log(id);
console.log('called');
}
the MenuBar component:
render() {
const onClick = this.props.onClick;
const titles = ["Home", "About", "Docket", "Polls", "News"];
const listItems = titles.map(title =>
<ListItem button id={title} onClick={onClick} key={title}>
<ListItemText primary={title} />
</ListItem>);
return (
<List
component="ul"
className="menu-bar">
{listItems}
</List>
);
}
I want to use this title, which I try to retrieve from the event, so that I can render a Home component, or About component, etc, depending on which ListItem is selected. But when I run this and click randomly on some of the ListItems in my browser, the title is only logged to the console sometimes (seemingly randomly). What is the best way for me to access which ListItem was selected, or why is the console logging the title only sometimes?
Here is what I get in the browser console:
Docket
called
called
Polls
called
News
called
The reason why you don't consistently get id is that the html element triggering the click event is not always what you think. Please see this sandbox for an example. When you click on any of the ListItem, sometimes you get (if you click to the left of where the letter is, based on my trials):
<div class="MuiButtonBase-root-1883 MuiListItem-root-1871 MuiListItem-default-1874 MuiListItem-gutters-1879 MuiListItem-button-1880" tabindex="0" role="button" id="a">...</div>
where the id is present. But other times you get:
<span class="MuiTypography-root-1892 MuiTypography-subheading-1899 MuiListItemText-primary-1889">a</span>
where the id is missing.
A solution to this is to pass title directly to the onClick function:
<ListItem button id={title} onClick={() => onClick(title)}>
...
</ListItem>
Accordingly, the onClick function should be updated as follows:
onClick = (title) => {
console.log(title);
console.log('called');
}
currentTarget is what worked it for me. (instead of just target)
I've read elsewhere that maybe MUI is resulting in unexpected behavior. Similar to what Claire Lin stated, in the Material UI List (and for me, it was nested in a MUI Drawer as well), when clicking on a button, the actual target was different from what I expected. The solution I found is to use the following:
Try e.currentTarget.getAttribute('value') , where "value" is data placed on the ListItem.
Here's how I added it. See "value" being assigned, and then logged below in the onClick. (...I tried to remove most of the extra code, but there is still a bit of superfluous code in there just bc it provides context.)
return (
//removed extra code for brevity
<Drawer
anchor={'left'}
open={drawerOpen}
onClose={toggleDrawerOpen(false)}
>
<List>
{itemsList.map((item, index) => {
const { text, icon, id } = item
return (
<ListItem
button
key={id}
value={index} // <<<< HERE!!!
onClick={(e) => {
console.log(e.currentTarget.getAttribute('value')) // <<<< HERE!!!
setDrawerOpen(false)
}}
>
{icon && <ListItemIcon>{icon}</ListItemIcon>}
<ListItemText primary={text} />
</ListItem>
)
})}
</List>
</Drawer>
...Again, I used "value" and assigned it the "index".
currentTarget is the trick.
I am getting this error when I open a modal on my React app but I can't figure out what it means or how to fix it.
"Warning: Material-UI: the modal content node does not accept focus.
For the benefit of assistive technologies, the tabIndex of the node is being set to "-1"."
<SettingsModal event={this.state.eventDetails} id={this.state.eventDetails.id} delete={this.handleRemoveEvent}/>
returns:
return(
<>
<Paper className={classes.SettingsModal}>
<h1>{this.props.event.name}</h1>
<p>{this.props.event.description}</p>
<p>{this.props.event.id}</p>
<Button onClick={(e) => this.props.delete(this.props.event)}>Delete Event</Button>
</Paper>
</>
);
I've found fix! To remove this error you should wrap your Modal content with DialogContent component like this
import DialogContent from '#material-ui/core/DialogContent';
// ...
render () {
return (
<Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
<DialogContent>
{this.state.modalContent}
</DialogContent>
</Modal>
);
}
All the credit goes to #Idos's comment above since he found the reference to the GitHub Issue. I found that this specific comment was useful.
The wrapping element of the Modal Contents needs to have a prop of
tabIndex: {-1}
In your case looks like you need to do the following:
return(
<Paper tabIndex:{-1} ...>
...
</Paper>
);
i had the same problem. apparently wrapping a div around SettingsModal should fix it.
Following #Wolfman comment, I just used Fragment from React, because it doesn't add any DOM element:
render () {
return (
<Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
<>
{this.state.modalContent}
</>
</Modal>
);
}
Even though, I still don't understand that issue :/