Develop Reference

JavaScript cant get value of input from my items

making beginer site and im getting api of crypto Coins and i put them on home page . i put "buy" button with input that i want to fill and buy . i have trying to use getElementsByClassName/ id and its only return the first item. if i log the first item its return value . but if i log all the rest of the items its return "undefined". so i have search a hours on solution and i have found that im using the same "classname" to all items - because of that it return only the first item value . but the problem that i have no idea and i can't find solution.
adding my code . (the map is on homepage)
site image with log
coin.js
import React, { useContext, useState } from 'react'
import './Coin.css';
import { Context } from '../src/context/Context'
const Coin = ({
name,
price,
symbol,
marketcap,
volume,
image,
priceChange
}) => {
const { user, dispatch } = useContext(Context);
// buyCoin function ( buy coin -> checking if user can buy)
function buyCoin() {
const coinNumber = document.getElementsByClassName("buyInput").value;
const coinPrice = { price }.price;
const wallet = user.wallet;
if (coinNumber * coinPrice > wallet) {
alert("you dont have enough money");
console.log(coinNumber);
return false;
} else {
console.log(coinNumber);
alert("purchase completed");
return true;
};
}
return (
<div className='coin-container'>
<div className='coin-row'>
<div className='coin'>
<img src={image} alt='crypto' />
<h1>{name}</h1>
<p className='coin-symbol'>{symbol}</p>
</div>
<div className='coin-data'>
<p className='coin-price'>${price}</p>
<p className='coin-volume'>${volume.toLocaleString()}</p>
{priceChange < 0 ? (
<p className='coin-percent red'>{priceChange.toFixed(2)}%</p>
) : (
<p className='coin-percent green'>{priceChange.toFixed(2)}%</p>
)}
<p className='coin-marketcap'>
${marketcap.toLocaleString()}
</p>
//button to buy the coin
<button className='buybtn' onClick={buyCoin}>Buy</button>
<input type="number" className="buyInput"></input>
</div>
</div>
</div>
);
};
export default Coin;

If you want the value from the input field, I recommend using the state to keep track of the value.
Something like:
const { coinNumber, setCoinNumber } = useState();
And add
<input
type="number"
className="buyInput"
value={coinNumber}
onChange={setCoinNumber }
></input>
Then you can get your value from coinNumber to use in the buyCoin function.

Increment and decrement counter on checkbox

I am working with Next.js to handle a question form that has different kinds of questions with single choice answers and multiple choice. I have a progress bar in which its percentages change according to selected answers. when I select a question's answer I increment a counter and when I unselect an answer decrement the counter.
1 - When I select a checkbox of a question at first increment the counter, but it must not increment when I select the second checkbox in the same question.
2 - When I unselect multiple-choice questions answer it must not decrement if any one of them is selected it must not decrement until the last one is unselected.
Now when selecting the first time it increments the counter but after that, if I select or unselect, it decrements.
Please help me to handle this.
Question sample:
This is my code:
<MuilteSelectQuestion
key={item.attributes.Number}
id={item.attributes.Number}
data={item}
name={`${item.attributes.Number}`}
handleMultiChecked={handleMultiChecked}
/>
The component:
<div className="relative flex items-start">
{Object.keys(attributes?.options).map(item => (
<>
<div className="flex items-center h-5">
<input
{...feild}
{...props}
id={item}
type="checkbox"
name={`${name}[]`}
value={`${item}`}
onClick={e =>
handleMultiChecked(
`question${id}`,
e.target.checked
)
}
className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>
</div>
<div className="ml-2 mr-3 text-sm">
<label
htmlFor={item}
className="font-medium text-gray-700"
>
{item}
</label>
</div>
</>
))}
</div>
The function:
function handleMultiChecked(val, checked) {
setCompareTitle(val);
if (val !== compareTitle && checked) {
setCounter(++counter);
} else {
setCounter(--counter);
}
}
useEffect(() => {
setPercent((parseInt(counter) / parseInt(dataCount)) * 100);
}, [counter]);
The data that come from backend:

I'd suggest you have another state to track all questions' counters
const [questionCounters, setQuestionCounters] = useState({})
Apply it to handleMultiChecked
function handleMultiChecked(val, checked) {
setCompareTitle(val);
const currentQuestionCounter = questionCounters[val] || 0 // if this question is not in the state, the default counter will be 0
const updatedQuestionCounter = checked ? currentQuestionCounter + 1 : currentQuestionCounter - 1 //update the current question's counter based on checked
//no ticks on the current question, we decrease the main counter
if (currentQuestionCounter === 1 && updatedQuestionCounter === 0) {
setCounter(--counter);
}
//first tick, we increase the main counter
if(currentQuestionCounter === 0 && updatedQuestionCounter === 1) {
setCounter(++counter);
}
//apply the latest counters' changes for question list
setQuestionCounters({
...questionCounters,
[val]: updatedQuestionCounter
})
}
useEffect(() => {
setPercent((parseInt(counter) / parseInt(dataCount)) * 100);
}, [counter]);

Increment and decrement counter according to select or unselect tag

I am working with the next js to handle a question form, I have multiple questions that have multiple answers, and the user may select one or multiple tags for a question.
if a user selects one or more tag to answer a question it must increment the counter just one time, If a user unselect a tag it must not decrement until unselect the last tag of the related question.
1 - When the user selects a tag of a question at first increment the counter, but it must not increment when I select the second tag in the same question.
2 - When the user unselects tags of question it must not decrement if any one of them is selected it must not decrement until the last one is unselected.
Now when selecting the first tag it increments the counter but after that, if I select or unselect, it does not decrement or increment.
Please help me to handle this.
My code:
<TageQuestion
key={item.attributes.Number}
id={item.attributes.Number}
data={item}
name={`${item.attributes.Number}`}
errors={errors}
touched={touched}
handleSelectOption={handleSelectOption}
/>
The component:
<div className="mt-3">
{Object.keys(attributes.options).map(item => (
<div className="inline" key={item}>
<input
{...feild}
{...props}
className="hidden"
id={item}
value={item}
type="checkbox"
name={`${name}[answer]`}
/>
<label
htmlFor={item}
id={item + "lable"}
onClick={e => {
selectTage(e.target);
handleSelectOption(`question${id}`, item);
}}
className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 mr-3 mb-2 cursor-pointer"
>
{item}
</label>
</div>
))}
</div>
The function:
function handleSelectOption(title, item) {
setCompareTagTitle(title);
if (title !== compareTagTitle) {
setTagItem([...tagItem, item]);
setCounter(++counter);
} else if (title === compareTagTitle) {
setCounter(counter);
} else {
setCounter(--counter);
}
}
Data that come from the backend:

we should consider 2 steps first in child component TagQuestions then in parent component [type].js
step1:
//TagQuestions.js
const [intialRender, setIntialRender] = useState(true);
// if component render for first time
const selectTag = (e) => {
// we should change intialRender to false to say that user select somthing
....
if (tage.length > 0) {
const isExit = tage.filter((item) => item.name === el.innerHTML);
if (isExit.length === 0) {
setTage([...tage, { name: el.innerHTML }]);
if (intialRender) {
setIntialRender(false);
}
}
} else {
setTage([...tage, { name: el.innerHTML }]);
if (intialRender) {
setIntialRender(false);
}
}
....
}
//use effect function to if user unselect all tags after selctions
useEffect(() => {
if (tage.length === 0 && !intialRender) {
//call parent function and set empty param to true.
handleSelectOption(`question${id}`, "", true);
}
}, [tage]);
step2(parent component):
const [compareTagTitle, setCompareTagTitle] = useState([]);
function handleSelectOption(title, item, empty = false) {
if (empty) {
const filter = compareTagTitle.filter(
(value) => value.toString() !== title.toString()
)
setCompareTagTitle(filter);
setCounter(--counter);
} else {
if (!compareTagTitle.includes(title)) {
setCompareTagTitle([...compareTagTitle, title]);
setCounter(++counter);
}
}
}

how to disable a button if more than once check box is checked in React JS

I have to create a button that activates when a check box is checked and disables when unchecked.
I was able to achieve this by the following code.
import React from "react";
import "./styles.css";
import{useState} from 'react'
export default function App() {
const [change, setChange] = useState(true);
function buttonHandler(){
setChange(!change)
}
return (
<div className="App">
<button disabled={change}>Click Me</button>
<input type="checkbox" onChange={buttonHandler}/>
<input type="checkbox" onChange={buttonHandler}/>
<input type="checkbox" onChange={buttonHandler}/>
</div>
);
}
Now I have another challenge where I have to keep it disabled if more than 1 check box is checked. I tried to use object and array manipulation but it does not work. Any advice on how this can be achieved.

import React from "react";
import{useState} from 'react'
export default function App() {
const [checkboxStatus, setCheckboxStatus] = useState(Array(3).fill(false));
function buttonHandler(index){
let status = [...checkboxStatus];
status[index] = !status[index]
setCheckboxStatus(status)
}
return (
<div className="App">
<button disabled={checkboxStatus.filter(status => status === true).length != 1}>Click Me</button>
{Array(3).fill(0).map((_, index) => <input type="checkbox" checked={checkboxStatus[index]} onChange={() => buttonHandler(index)}/>)}
</div>
);
}
You can do that by keeping track of the status of the checkbox rather than tracking the status of the button. This is because if you know the status of all the checkboxes, you can easily calculate the status of the button.
I have also taken the liberty of converting the checkbox to map it since the content is the same. You can do the same by passing the index to each of them. Something like <input type="checkbox" onChange={() => buttonHandler(0}/> and so on for each of the inputs.

Wrap your input elements in a parent element like form or div.
Maintain state; an array that contains each box status (either true or false). When a box is changed call the handleChange which will update the state.
The button disabled property should call a function called isDisabled which will check to see if there are zero boxes checked or more than one box checked, returning true if the condition is matched.
const { useEffect, useState } = React;
function Example() {
const [boxes, setBoxes] = useState([]);
// In the text I suggested wrapping the inputs in
// a parent element. This was so we could use the following
// code to find its index within the list of inputs
// without adding any more code to the JSX
// Cribbed from https://stackoverflow.com/a/39395069/1377002
function handleChange(e) {
// Destructure the children from the parent of
// the element that was changed (ie all the input elements)
const { parentNode: { children } } = e.target;
// Find the index of the box that was changed
const index = [...children].indexOf(e.target);
// Copy the state
const newState = [...boxes];
// Toggle the boolean at the index of
// the `newState` array
newState[index] = !newState[index];
// Set the state with the updated array
setBoxes(newState);
}
// `filter` the boxes that return true.
// Return true if the length is 0 or > 1.
function isDisabled() {
const len = boxes.filter(box => box).length;
return len === 0 || len > 1;
}
return (
<div className="App">
<button disabled={isDisabled()}>Click Me</button>
<form>
<input type="checkbox" onChange={handleChange}/>
<input type="checkbox" onChange={handleChange}/>
<input type="checkbox" onChange={handleChange}/>
</form>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Additional documentation
Destructuring assignment
Spread syntax

How to get the value of a radio input which is by default checked?

I have a radio button inside a .map method and the first is checked defaultChecked={index === 0}, how do I get the value of the option here? without using plain javascript
const [optionData, setOptionData] = useState({})

{variant.options.map((option, index) => {


<input
type="radio"
name="variant-select"
id="variant-select"
className="focus:ring-0 focus:ring-offset-0 focus:text-red-600 text-red-600 border-none -mt-1 cursor-pointer z-10"
defaultChecked={index === 0}
value={index}
onClick={(e) => {
setOptionData(option)
 }
}}
/>
}
}

This syntax may help you:function myFunction() { var x = document.getElementById("myRadio").value; document.getElementById("demo").innerHTML = x; }