We Keep Coding

clicking a button second time, getting different result

When a button (material ui) is clicked for a second time, I want that button to be disabled (disabled={true}). I did not find any example related to this on StackOverflow.
<Button
onClick={this.startDraw.bind(this)}
disabled={}
startIcon={<Brush />}
>
At first, the button is clickable. When it is clicked, something happens, but when this same button is clicked a second time, the button should be disabled (cannot be clicked anymore).

For Class component use
state = {
count: 0
};
this.setState({ count: count + 1 }); // use this on your button click
and for the button part
<Button
onClick={this.startDraw.bind(this)}
disabled={state.count == 2}
startIcon={<Brush />}
/>
for functional component use this approach
const [count , setCount ] = useState(0);
setCount(count + 1) // use this on your button call
<Button
onClick={this.startDraw.bind(this)}
disabled={count == 2}
startIcon={<Brush />}
/>

click handler not toggling state

I'm trying to create a simple app where if you click on a button, a modal overlay appears, and if you click on the 'x' in the modal it disappears.
I made a component for my button, called ShowOffer, and I have an onclick on it which toggles the boolean value of modalVisible, which is a piece of state.
However, nothing happens when I click on it.
I made another button element with the same onclick, and it seems to work fine.
Here is a code sandbox

You are adding onClick on the ShowOffer component, but here you are just passing it as a prop in it.
<ShowOffer display={"block"} onClick={toggleVisibility} />
is same as
React.createElement(ShowOffer, {
display: "block",
onClick: toggleVisibility
});
Under the hook, you are just passing an argument to a function
You have to add onClick event on the button in ShowOffer component as:
Live Demo
<button
style={{ display: `${display}` }}
onClick={toggleVisibility}
className="show-offer"
>
Show Offer
</button>
and you have to pass the toggleVisibility callback to ShowOffer as:
<ShowOffer display={"block"} toggleVisibility={toggleVisibility} />

This is the simple logic. Your ShowOffer component is not identify the onclick event and this component's button is not have any event handlers. So you just pass the event or directly pass the function name for access the event. Passing props name is the important one.
<ShowOffer display={"block"} onClick = {toggleBox}/>
export default function ShowOffer({ display, onClick}) {
return (
<button style={{ display: `${display}` }} className="show-offer" onClick={onClick}>
Show Offer
</button>
);
}
or
<ShowOffer display={"block"} toggleBoxFunct = {toggleBox}/>
export default function ShowOffer({ display, toggleBoxFunct }) {
return (
<button style={{ display: `${display}` }} className="show-offer" onClick={toggleBoxFunct}>
Show Offer
</button>
);
}

You can use concept of Callbacks,
App.js, make following changes,
pass toggleVisibility={toggleVisibility} as props, no need to mention onClick at component but at button
return (
<div className="App">
<Modal display={modalVisible ? "flex" : "none"} />
<ShowOffer display={"block"} onClick={toggleVisibility} toggleVisibility={toggleVisibility}/>
<button onClick={toggleVisibility}>Button</button>
</div>
);
ShowOffer.js, props passed function, call that function here with onclick,
import React from "react";
import "./ShowOffer.css";
export default function ShowOffer({ display, toggleVisibility }) {
return (
<button style={{ display: `${display}` }} onClick={toggleVisibility} className="show-offer">
Show Offer
</button>
);
}
working solution is here, https://codesandbox.io/embed/modal-overlay-tnis9?fontsize=14&hidenavigation=1&theme=dark

How to scroll beyond the focused element in React

I am working on a React App, and using antd as the UI-library. What I intend to do is whenever a button named Open Modal is clicked, a Modal will open up, and when user clicks on the Ok button in the modal, an input field will be displayed and page should automatically be scrolled to the top. However, since the input field contains focus, the scroll happens only until the input field becomes visible. Is there any way to make the page scroll to top, ignoring focused elements using JS only. This is the minimal code to reproduce the example:
const App = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const [isInputVisible, setIsInputVisible] = useState(false);
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
setIsInputVisible(true);
window.scroll(0, 0);
};
const handleCancel = () => {
setIsInputVisible(false);
setIsModalVisible(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
>
/*Some contents...*/
{isInputVisible && <input autoFocus />}
/*Some contents...*/
</Modal>
</>
);
};
This is the sandbox link to reproduce the use-case.
Code Sandbox

You can always use scrollIntoView method.
scrollIntoView
I tried with ref and useRef but it didnt work, so the other solution was to find the modal through it's class name and use the above method.
Check this
sandbox

I am not sure if it will work but I think you can work your way through with the useRef hook where you can focus after the click event. Refer this

click redirect from button to file input

Hey is there a smarter way to redirect a click from a button to file input element ?
Currently I'm using:
function clickRedirect() {
document.getElementById("uploadFileButton").click();
}
Works. However I've been clearing any DOM manipulation (outside of appState) in my react project and this is the last bit remaining. I'd like to get rid of it.

You can use ref with hidden button
<input id="myInput" type="file" ref={(ref) => this.myInput = ref} style={{ display: 'none' }} />
<FloatingActionButton
className="floatingButton"
backgroundColor='#293C8E'
onClick={(e) => this.myInput.click() }
>
</FloatingActionButton>
attached demo here:
https://jsfiddle.net/432yz8qg/58/

Getting values from material-ui Button in React

I have this function
handleChangeButton = (e) => {
alert(e.target.value)
this.props.setFieldValue('degreeLevel', e.target.value);
}
and in my component render, I have
<div className="twelve columns">
<p>Degree Level</p>
<Button
variant="raised"
label="Default"
onClick = { this.handleChangeButton }
value="Doctorate"
>
Doctorate
</Button>
<Button variant="raised" label="Default">
Masters
</Button>
<Button variant="raised" label="Default">
Undergraduate
</Button>
</div>
So, what I want to do is, when I click the Doctorate button, it should this.props.setFieldValue to degreeLevel which is one of the fields in my Formik form. When I click the button, the alert gives me undefined which means it's not reading the value Doctorate.
How can I make e.target.value read the value of the button?

Use currentTarget instead of target
handleChangeButton = (e) => {
alert(e.currentTarget.value)
this.props.setFieldValue('degreeLevel', e.currentTarget.value);
}

#yugantarkumar #monsto, This is not something that is specific to Material UI, rather this is how it is done in JS by using event bubbling. You can read more about the difference here: http://www.qc4blog.com/?p=650
currentTarget refers to the element, to which the event listener is attached to, while target indicates the element that was interacted with.
In MUI this issue is caused by clicking on MuiButton-label component instead of the MuiButtonBase component.