I am trying to disable one of the button, when clicked but it is not working. onClick is changing two states, one for the text and one to disable the button.
const [loading, setLoading] = useState();
const [disable, setDisable] = useState(false);
return (
<div>
<p>Data is {loading ? "Loading" : "not Loading"} </p>
<button
onClick={() => {
setLoading(true);
setDisable(true);
}}
disabled={disable}
>
ON
</button>
<button
onClick={() => {
setLoading(false);
setDisable(false);
}}
disabled={disable}
>
OFF
</button>
</div>
);
you should set the "OFF" button to disabled={!disable}
<button
onClick={() => {
setLoading(false);
setDisable(false);
}}
disabled={!disable}
>
OFF
</button>
Related
I made a few buttons that gonna change it's value into select or deselect. But I want to use URI I got from API fetch.
Here is my code:
const ButtonComponent = () => {
const [isSelected, setIsSelected] = useState(false)
return (
<div className="button">
<button onClick={() => setIsSelected(!isSelected)}>{isSelected ? "Deselect" : "Select"}</button>
<button onClick={() => setIsSelected(!isSelected)}>{isSelected ? "Deselect" : "Select"}</button>
<button onClick={() => setIsSelected(!isSelected)}>{isSelected ? "Deselect" : "Select"}</button>
</div>
)
}
Where I have to put the URI so that it could be saved in the state?
Note: URI state could be array
I am not entirely sure if this is what you are looking for but just let me know if this is ok.
const ButtonComponent = () => {
const [isSelected, setIsSelected] = useState(false)
const [uri, setUri] = useState(null)
return (
<div className="button">
<button
onClick={() => {
setIsSelected(!isSelected)
setUrl('uri1')
}}>
{isSelected ? "Deselect" : "Select"}
</button>
<button
onClick={() => {
setIsSelected(!isSelected)
setUrl('uri2')
}}>
{isSelected ? "Deselect" : "Select"}
</button>
<button
onClick={() => {
setIsSelected(!isSelected)
setUrl('uri3')
}}>
{isSelected ? "Deselect" : "Select"}
</button>
</div>
)
}
Do you want something like this?
I want a modal to close once a different modal is pressed, but I'm not sure on how to do it.
Essentially, if modal1 is pressed, it should show the contents of modal1, but as soon as modal2 is pressed,modal1 should disappear and only modal2 should show it's contents. How do I go about this?
I've tried to set it up with an open and close in the onclick but only had problems.
This is how I've got my code currently set up:
const [openQueueList, setOpenQueueList] = useState(false);
const handleOpenQueue = () => {
setOpenQueueList(true);
};
const [openRoomlist, setOpenRoomlist] = useState(false);
const handleOpenRoom = () => {
setOpenRoomlist(true);
};
const [openRoomQueueList, setOpenRoomQueueList] = useState(false);
const handleOpenRoomQueue = () => {
setOpenRoomQueueList(true);
};
in the return
<div class="modal">
<div >
{openQueueList ?
<TrackTable></TrackTable>
: null}
</div>
</div>
<div class="modal">
<div >
{openRoomlist ?
<LobbyUsers> </LobbyUsers>
: null}
</div>
</div>
<div class="modal">
<div >
{openRoomQueueList ?
<QueueSection></QueueSection>
: null}
</div>
Triggering the buttons
<button onClick={handleOpenRoomQueue}>
<QueueMusicIcon></QueueMusicIcon>
</button>
<button onClick={handleOpenRoom}>
<GroupIcon ></GroupIcon>
</button>
<button onClick={handleOpenQueue}>
<AudiotrackIcon></AudiotrackIcon>
</button>
Instead of using a state for each modal you could give each a key.
State would look like this
const [currentModal, openModal] = useState(null);
Then to open
<button onClick={() => openModal('queueList')}>Queue List</button>
<button onClick={() => openModal('roomList')}>Room List</button>
<button onClick={() => openModal('roomQueueList')}>Room Queue List</button>
Then your modals would look something like:
<div className="modal">
{currentModal === 'queueList' ?
<TrackTable></TrackTable>
: null}
{currentModal === 'roomList' ?
<LobbyUsers> </LobbyUsers>
: null}
{currentModal === 'roomQueueList' ?
<QueueSection></QueueSection>
: null}
</div>
How do I hide this Ionic React button 'Submit' on clicking itself?
<IonButton
size="large"
color="primary"
expand="full"
onClick={() => {
showOptionCardDisplay();
}}
>
Submit
</IonButton>
You can use Hooks:useRef to attach the button. Then you can do whatever to it. For example in this case set an attribute like "hidden" to "true".
const btnref = useRef<HTMLIonButtonElement>(null);
...
<IonButton
size="large"
color="primary"
expand="full"
ref={btnref}
onClick={() => { setIsShowBtn(false); btnref.current?.setAttribute("hidden","true");}}
shape="round"
>
Submit
</IonButton>
you can use something like below to hide the button, but I think I use the wrong approach.
const showOptionCardDisplay = (() => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
<div id="myDIV">
<IonButton
size="large"
color="primary"
expand="full"
onClick={() => {
showOptionCardDisplay();
}}>
Submit
</IonButton>
</div>
use flag to hide button.
example:
const isHidden = useState(false);
{
isShowBtn && (
<IonButton
size="large"
color="primary"
expand="full"
onClick={() => { setIsShowBtn(false); })
>
Submit
</IonButton>
)}
While searching I've found how to use ternary operator to change icon of a button, similar approach can be used to hide button
const [playing, setPlaying] = useState(false);
const play = () => {
if (playing == true){
// stop and start again
player.playbackManager.pause();
setPlaying(false);
}else{
// play
player.playbackManager.play();
setPlaying(true);
}
};
return (
<div>
<div className="controller-bar">
<IonButton component="span" onClick={play}>
{playing ? ( <PlayArrow /> ) : ( <Pause/> )}
</IonButton>
</div>
);
}
And here how to hide button
return (
<div>
<div className="controller-bar">
{playing ? (
<IonButton component="span" onClick={play}>
<PlayArrow />
</IonButton>
) : ( null )}
</div>
);
}
as you see my form not submit i can't see where is the problem i search but all the solution i found i already made it so what else can be the problem when i try to use console it don't show like it doesn't enter the submit function at all
this is the pieces in my component that work with form
const [editMyText, setEditMyText] = useState({
editIsActive: false,
textValue: body,
});
const inputRef = useRef(null);
const handleSaveEdit = (e) => {
setEditMyText({
editIsActive: false,
textValue: inputRef.current.value,
});
// updatePost(_id, textValue);
};
const handleOnSubmit = (e) => {
e.preventDefault();
console.log('done 1');
updatePost(_id, textValue);
console.log('done 2');
};
{body !== null && !editIsActive ? (
<p
className='card-text'
onClick={(e) => auth.user._id === user && handleEditText(e)}
>
{textValue}
</p>
) : (
<form
className='edit-post-form'
onSubmit={(e) => handleOnSubmit(e)}
>
<textarea
className='edit-text'
defaultValue={textValue}
ref={inputRef}
/>
<button
className='btn btn-raised btn-danger mr-2'
onClick={(e) => handleCloseEdit(e)}
>
Close
</button>
<button
type='submit'
className='btn btn-raised btn-success'
onClick={(e) => handleSaveEdit(e)}
>
Save
</button>
</form>
)}
I'm not a React expert yet thus I have a question for you - how to invoke my popup window from:
import {options, columns,convertToArray} from './consts'
const index = () => {
const {data, loading, error, performFetch} = fetchHook({path: "/xxx/yyy", fetchOnMount: true})
return (
<div className={classes.Container}>
<h1>List of products</h1>
<Divider className={classes.Divider} />
<ProductTable data={convertToArray(data)} options={options} columns={columns}/>
</div>
)
}
export default index;
consts.js
export const actions = (productPropertyId, showModal) => {
const productDetails = (productPropertyId) => {
}
const removeProduct = (productPropertyId, showModal) => {
actions(productPropertyId, showModal);
return (
<div className={classes.actionsContainer}>
<Button
onClick={() => productDetails(productPropertyId)}
> {"More"}
</Button>
<Button
const removeProduct = (productPropertyId, showModal) => {
actions(productPropertyId, showModal);
>{"Remove"}
</Button>
</div>
)
};
export const convertToArray = (productList) => {
let products = []
if (productList != null) {
productList.map(product => {
column1, column2, column3, actions(product.id)]
products.push(prod)
})
}
return products;
};
My popup is --> <FormDialog/> based on react Materials.
Is it possible to invoke popup in this place?
I have a react material table with some columns. The last column contains 2 buttons, one of them is "Remove" (row). Here I want to invoke my popup. Maybe I should rebuild my structure?
UPDATE
Below is my popup - I wonder how to run this popup from the place above:
const formDialog = (popupOpen) => {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
{/*<Button variant="outlined" color="primary" onClick={handleClickOpen}>*/}
{/* Open alert dialog*/}
{/*</Button>*/}
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
<DialogContent>
<DialogContentText>
To subscribe to this website, please enter your email address here. We will send updates
occasionally.
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Email Address"
type="email"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default formDialog;
UPDATE 2
I updated my code taking into cosideration the tips from your response, see above. Can I add a parameter showModal in my export const actions = (productPropertyId, showModal) and then invoke this component with different showModal value? UNfortunately my popup doesn't appear when I click on Remove button :(
You can invoke it conditionally and controle it using some state variable. Like this:
const [removeModal, removeToggle] = useState(false);
return (<>
<div className={classes.actionsContainer}>
<Button
onClick={() => productDetails(productPropertyId)}
> {"More"}
</Button>
<Button
onClick={() => removeToggle(true)}
>{"Remove"}
</Button>
</div>
{removeModal ? <YourComponent /> : ''}
</>
)
I'm using a react fragment there <></> just to position the modal div outside the main div, but you can also invoke it inside your main div as well (I usually do this and set the position: fixed so the modal/popup coud appear in top of everything).