This question already has answers here:
Show or hide element in React
(34 answers)
Closed 1 year ago.
When click a button, it should render an element, but it does not work. If I click, nothing happens, nor does it trigger any error.
I'm using material UI
component content is a form
function handleBoxRegister(){
return (
<div>test</div>
)
}
<Button
variant="contained"
color="primary"
className={classes.buttonRegister}
onClick={handleBoxRegister}
>
<AddIcon>
</AddIcon>
Registrar paciente
</Button>
It has a div in the middle of the screen and a sidebar with several buttons, one of which is registration. Then when the user clicks on it, a form should appear in the middle of the screen.
This is where state comes in, to make the form appear/disappear from the view you should can store the data (state) in a boolean variable and check if that is true or false then in the render show it or hide it as per the value of the variable.
Below we are using the && operator, which will render the component after it only if the first value is true.
For example:
function exmapleView (props) {
const [isRegisterShown, setIsRegisterShown] = useState(false);
return (
<div>
<Sidebar>
<Button
variant="contained"
color="primary"
className={classes.buttonRegister}
onClick={() => setIsRegisterShown(true)}>
</Sidebar>
{isRegisterShown && <div>// Add the Register Form</div>}
// Add Other Components here
</div>
)
}
Related
Hello i want to loading a button when i am clicking it. My problem is that my buttons are created dynamic. I am using antd styling for the button. My code is below
<Button
loading={this.state.myLoader}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I was trying using inside onclick method a state that can become true when this function in executed, my problem with this is when i click a button all the button are loading, but i want to loading only the selected button. How i can do this? Inside my onclick method i can take the id of the button that is clicked every time
Try this
this.state = {
myLoader: []
}
In onClick pass the index to the function
this.myFunction = (r, i) => {
const loader = [...this.state.myLoader];
loader[i] = true;
this.setState({myLoader: loader)};
}
in the button
<Button
loading={this.state.myLoader[i]}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
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.
//This is dropdown component
const Dropdown: FC<any> = ({ list, item, title },props) => {
const isDisabled = item && item.users.length > 0 ? false : true;
const [show, setShow] = useState(false);
const toggleMenu = () => {
setShow(!show);
};
return (
<div>
<Button
title={title || "Action"}
onClick={toggleMenu}
iconName="downarrow"
iconPosition="left"
variant="outlined"
color="primary"
/>
)
The action menu is not getting closed even if I click somewhere on page, the menu
remains open until I explicitly click on the Action button again.
If you want the action menu to close when you click anywhere on the page using onClick won't help it. Use onBlur and use it on the button as -
<Button
title={title || "Action"}
onClick={toggleMenu}
onBlur={() => setShow(true)}
iconName="downarrow"
iconPosition="left"
variant="outlined"
color="primary"
/>
Or alternatively, what you can do is -
Create a reference to your outer div.
Add event listener mousedown (or click) to the document whenever this component appears on screen (eg. mount) and also don’t forget to remove the event on unmount too.
Inside the event (handleClick) this.{Any ref name you give}.contains(e.target) will return true if whatever you are clicking is inside the “node” ref.
Now you have it, you can now do whatever you feel like, close the modal, close the dropdown menu list, anything is allowed.
The above 4 points were taken from the article - https://medium.com/#pitipatdop/little-neat-trick-to-capture-click-outside-react-component-5604830beb7f.
I am experiencing an issue with Material-UI's ripple effect when mounting/un-mounting button components. I have some buttons which toggle state, and the button which is displayed is based on this state. The problem is that when I click the button to toggle this state, and the new button is rendered, the ripple/hover effects that were applied from the previous button carries over to the newly mounted button.
Here is a simplified example of this issue on codepen.
Does anyone know why this is happening, and how to prevent this behavior?
React (and thus Material-UI) thinks they are the same button with changed props. You can make React realize they are different buttons by giving them distinct keys (e.g. "button1" and "button2" in my altered version of your sandbox): https://codesandbox.io/s/competent-fermat-q9ojt?file=/src/demo.js.
export function SingleButtonExample() {
const classes = useStyles2();
const [displayedButton, setDisplayedButton] = useState(1);
const toggleDisplayedButton = () =>
setDisplayedButton(displayedButton === 1 ? 2 : 1);
const button1 = (
<Button
key="button1"
variant="contained"
color="primary"
onClick={toggleDisplayedButton}
>
Show Button 2
</Button>
);
const button2 = (
<Button
key="button2"
variant="contained"
color="secondary"
onClick={toggleDisplayedButton}
>
Show Button 1
</Button>
);
return (
<div className={displayedButton === 1 ? classes.button1 : classes.button2}>
{displayedButton === 1 ? button1 : button2}
</div>
);
}
Another way to handle this (which may be more convenient in some cases) is just to make sure the two buttons have a different spot in the JSX:
return (
<div className={displayedButton === 1 ? classes.button1 : classes.button2}>
{displayedButton === 1 && button1}
{displayedButton !== 1 && button2}
</div>
);
This will become either <div>{false}<Button/></div> or <div><Button/>{false}</div> which still allows React to tell that they are different buttons.
I have created a button at the bottom of the page which when clicked open a modal.
Now I have a button in a header. I want that when we click on that header button it should too open the modal. That is how can we use the same function which is used for the button which is at the bottom of the page.
Button clicks should set state. State decides if modal is shown
One way of doing it with hooks is having the buttons set state with a boolean value that decides if the modal is shown.
const Component = () => {
const [modalOpen,setModalOpen] = useState(false)
return (
<div>
<button onClick={setModalOpen(true)} >
Open Modal 1
</button>
<div>
Your other content
</div>
<button onClick={setModalOpen(true)} >
Open Modal 2
</button>
<Modal show={modalOpen} />
</div>
)
}