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?
Related
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>
In the process of creating an NFT MarketPlace, I want to be able to write a hashtag for each NFT.
I tried to make this function. When the button(Tooltips) is clicked, the Modal screen is displayed so that you can enter a hashtag, and the entered hashtag is displayed under the NFT image.
However, when writing to one NFT, the same character is output to all NFTs.
*I am using a server with Moralis.
I tried to find a way, but I couldn't solve it.
This is my code.
const [visible1, setVisibility1] = useState(false);
const [nftToSend1, setNftToSend1] = useState(null);
const [tagItem, setTagItem] = useState('')
const [tagList, setTagList] = useState([])
const onKeyPress = e => {
if (e.target.value.length !== 0 && e.key === 'Enter') {
submitTagItem()
}
}
const submitTagItem = () => {
let updatedTagList = [...tagList]
updatedTagList.push(tagItem)
setTagList(updatedTagList)
setTagItem('')
}
const deleteTagItem = e => {
const deleteTagItem = e.target.parentElement.firstChild.innerText
const filteredTagList = tagList.filter(tagItem => tagItem !== deleteTagItem)
setTagList(filteredTagList)
}
return (
<> ...
<div style={styles.NFTs}>
{NFTBalance &&
NFTBalance.map((nft, index) => (
<Card
hoverable
actions={[
<Tooltip title="HashTag">
<TagOutlined onClick={() => handleTagClick(nft)} />
</Tooltip>,
]}
cover={
<Image
preview={false}
src={nft?.image || "error"}
fallback="data:image/png;base64,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"
alt=""
style={{ height: "240px" }}
/>
}
key={index}
>
<Meta title={nft.name} description={nft.contract_type} />
{tagList.map((value, index) => (
<p>#{value}</p> //hashtag(output)
))}
</Card>
))}
</div>
<Modal
title={`HashTag ${nftToSend1?.name} #${nftToSend1?.token_id}`}
visible={visible1}
onCancel={() => setVisibility1(false)}
footer={[
<Button onClick={() => setVisibility1(false)}>
Save
</Button>,
]}
>
<Spin spinning={loading}>
<img
src={`${nftToSend1?.image}`}
/>
<Input
autoFocus
placeholder="Press Enter to enter a hashtag"
tabIndex={2}
onChange={(e) => setTagItem(e.target.value)}
onKeyPress={onKeyPress}
value={tagItem}
/>
{tagList.map((tagItem, index) => {
return (
<div key={index}>
<text>{tagItem}</text>
<button onClick={deleteTagItem}>X</button>
</div>
)
})}
</Spin>
</Modal>
...
i have custom numpad and input box and i want that when user click any number it shows in input field.
<div class="grid-container">
<button class="grid-item" onClick={inputNumKey}>1</button>
<button class="grid-item" onClick={inputNumKey}>2</button>
<button class="grid-item" onClick={inputNumKey}>3</button>
<button class="grid-item" onClick={inputNumKey}>4</button>
<button class="grid-item" onClick={inputNumKey}>5</button>
<button class="grid-item" onClick={inputNumKey}>6</button>
<button class="grid-item" onClick={inputNumKey}>7</button>
<button class="grid-item" onClick={inputNumKey}>8</button>
<button class="grid-item" onClick={inputNumKey}>9</button>
<button class="grid-item" onClick={inputNumKey}>*</button>
<button class="grid-item" onClick={inputNumKey}>0</button>
<button class="grid-item" onClick={inputNumKey}>#</button>
</div>
this is my numpad jsx code.
<div className="input-box-ad">
<input onChange={changeTime} name="hour" value={updatedHour} />
<input onChange={changeTime} name="minute" value={updatedMinute} />
<input onChange={changeTime} name="second" value={updatedSecond} />
</div>
this is input fields i want values of this button.
for more details i have codesandbox also - https://codesandbox.io/s/fancy-frog-l5uo2
const activeInput = { "background-color": "#BBFFCC" };
const Numbers = () => {
const [hour, setHour] = useState("00");
const [minute, setMinute] = useState("00");
const [second, setSecond] = useState("00");
const [timeType, setTimeType] = useState("hour");
const press = (k) => {
const [value, setter] =
timeType === "hour"
? [hour, setHour]
: timeType === "minute"
? [minute, setMinute]
: [second, setSecond];
setter((value.charAt(value.length - 1) || "0") + k);
};
return (
<div>
<div class="grid-container">
<button onClick={() => press("1")}>1</button>
<button onClick={() => press("2")}>2</button>
<button onClick={() => press("3")}>3</button>
<button onClick={() => press("4")}>4</button>
<button onClick={() => press("5")}>5</button>
<button onClick={() => press("6")}>6</button>
<button onClick={() => press("7")}>7</button>
<button onClick={() => press("8")}>8</button>
<button onClick={() => press("9")}>9</button>
<button onClick={() => press("*")}>*</button>
<button onClick={() => press("0")}>0</button>
<button onClick={() => press("#")}>#</button>
</div>
<div className="input-box-ad">
<input name={"hour"} value={hour} size={2}
onClick={() => setTimeType("hour")}
onChange={(e) => setHour(e.target.value)}
style={timeType === "hour" ? activeInput : {}}
/>
:
<input name={"minute"} value={minute} size={2}
onClick={() => setTimeType("minute")}
onChange={(e) => setMinute(e.target.value)}
style={timeType === "minute" ? activeInput : {}}
/>
:
<input name={"second"} value={second} size={2}
onClick={() => setTimeType("second")}
onChange={(e) => setSecond(e.target.value)}
style={timeType === "second" ? activeInput : {}}
/>
</div>
</div>
);
};
This is going to be very difficult to manage. I don't know why do you need the buttons to enter input you can do it with the keyboard.
If you do it with a keyboard then it will be easy.
const[updatedHour,setUpdatedHour] = useState();
function changeHour(e){
setUpdatedHour(e.target.value)
}
<input onChange={changeHour} name="hour" value={updatedHour} />
Do the same for all input boxes.
Still, if you want to do it with buttons here is a hint.
function inputNumKey(e){
console.log(e.target.textContent)
}
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>
);
}