We Keep Coding

How to select only one checkbox instead of being able to select more than one? (react)

I would like to only be able to select a single checkbox and not all or more than one. I would like to use checkbox instead of radio because I can disable it without having to mark another radio
<C.SingleCard>
<h2>Pizza</h2>
<div>
<hr />
<h3>Flavors</h3>
<hr />
</div>
<div>
<h4>Pepperoni</h4>
<input type="checkbox" name='flavor' />
</div>
<div>
<h4>Chicken</h4>
<input type="checkbox" name='flavor' />
</div>
<div>
<h4>Bacon</h4>
<input type="checkbox" name='flavor' />
</div>
<div>
<button>Add</button>
</div>
</C.SingleCard>

Here's the simplest way I can think of:
Put the options in an array and just keep track of the selected index. Set the index to null if the user selected the same index. Use the index parameter of map to set checked=true on the selected box. The onChange callback will trigger when the user selects one of the boxes, you can ignore the event parameter and just pass the index of the box.
const options = ['pepperoni', 'chicken', 'bacon'];
export default function App() {
const [selected, setSelected] = useState(null);
function onChange(i) {
setSelected((prev) => (i === prev ? null : i));
}
function whatDidIPick() {
console.log(options[selected] || 'nothing');
}
return (
<div>
{options.map((o, i) => (
<label key={i}>
{o}
<input
type="checkbox"
checked={i === selected}
onChange={() => onChange(i)}
/>
</label>
))}
<br />
<button onClick={whatDidIPick}>Log what I picked</button>
</div>
);
}
https://stackblitz.com/edit/react-ts-1uwfcq?file=App.tsx

Why is change function not firing on radio input in react

Okay, so in my code, I have these two radio inputs, one with a fixed value, one with an input-field to take the dynamic value.
Now what I wanted to do is, when the user enters value in the input field, the corresponding radio button will get selected automatically, and the values will get updated as well. and if the user selects the default value, the state will get updated with the default value.
My code looks like this..
<ul className='list-unstyled mb-0 d-flex flex-column flex-lg-row justify-content-around'>
<li className='mr-4'>
<input
defaultChecked
onChange={() => updateState('timeLimit',defaultTime)}
type="radio"
value={defaultTime}
name='time'
className='mr-2'
id="defaultTime"/>
<label htmlFor="defaultTime"> {defaultTime} Mins. (default)</label>
</li>
<li>
<input
onChange={(e) => updateState('timeLimit',e.target.value)}
type="radio"
name='time'
value={customTime}
ref={customTimeRef}
className='mr-2'
id="customTime"/>
<label htmlFor="customTime">
<input
onChange={(e) => updateCustomTime(e.target.value)}
style={{outline:'none', border:'none',width:'9rem'}}
placeholder='Enter Your Time'
min='0'
className='border-bottom border-info pl-2 pb-1'
type="number"/> Mins. (custom)
</label>
</li>
</ul>
The functions are defined as
const updateCustomTime = (val) => {
if(customTimeRef.current.checked){
setCustomTime(val)
updateState('timeLiimit',val)
}
else{
customTimeRef.current.checked=true
setCustomTime(val)
updateState('timeLiimit',val)
}
}
Now the issue is, when I type into my input field, the updateState function is fired, the radio gets checked, but if I click on the radio buttons afterwards, they aren't firing the onchange events associated.
What's wrong here ? And how to achieve the desired result ??

Check this component
use a boolean state to set the checked property
const App = () => {
const [useDefault, setUseDefault] = React.useState(true)
return (
<div>
<div>
<input type="radio" name="time" checked={useDefault} onClick={() => setUseDefault(true)} />
</div>
<div>
<input type="radio" name="time" checked={!useDefault} />
<input type="text" onKeyUp={() => setUseDefault(false)} />
</div>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

How to show value of checkbox on react

I have a checkbox filters. The problem is that I need to display all checked checkbox label (e.g. if clicked Vimeo there should be a <h1> with Vimeo filter applied).
const checkboxTarget = ['Dailymotion', 'Vimeo', 'VK']
{checkboxTarget.map((text, index) => (
<div>
<input type="checkbox" id="flexCheckIndeterminate" />
<label style={{ marginLeft: '5px' }} class="form-check-label" for="flexCheckIndeterminate">
{text}
</label>
</div>
))}

In a functional component,
const[selectedCheckbox, setSelectedCheckbox] = useState("");
And then, add an OnClick Listener to the checkbox. Don't forget to check if the checkbox is checked. I would write a function to update SelectedCheckbox if multiple selection is a possibility.
<input type="checkbox" value={text} id="flexCheckIndeterminate" onClick={(e) => {if(e.target.checked){setSelectedCheckbox(e.target.value)} }} />

onClick, How to know checkbox is selected or unselected in multiple checkboxes?

I found many checkbox related questions but not was related like mine. Please check and help.
I have 10+ checkboxs which are dynamically creating as per the API data (looping list).
Here I want to know onClick whether the checkbox is unchecked or checked (accordingly i'll call different API).
To know/tack the checked or unchecked, i tried using the state. But the problem is while i'm checking/ unchecking all checkboxs are affecting with same.
Please help me handle that individually.
My code as follows:
this.state = {
isChecked: true,
};
handleClick = (e) => {
console.log("clicked", e.fieldId);
this.setState((prevState) => ({
isChecked: !prevState.isChecked,
}));
if(this.state.isChecked){
// update to API 1
}else{
// update to API 2
}
};
<input
type="checkbox"
checked={this.state.isChecked}
onClick={() => this.handleClick(subitems)}
name="check"
/>
<label className="form-check-label cost-blue">
{subitems.message}
</label>
Note: some checkboxs are already checked as per API list data. But by using the state, i unable to handle that also
Edit: This how i'm looping from API
Object.keys(dataMap).map((value, key) => {
return (
<div className="mt-10">
<div className="row text-center m-0 p-box white">
<div>
<img src={plant_icon} alt="plant" />
<span className="mb-0"> {value}</span>
</div>
</div>
{dataMap[value].map((subitems) => {
return (
<div className="form-check custom-cb m-10">
<input
className="form-check-input mt-7"
type="checkbox"
checked={this.state.isChecked}
onClick={() => this.handleClick(subitems)}
name="check"
/>
<label className="form-check-label cost-blue">
{subitems.message}
</label>
</div>
);
})}
</div>
);
})

tabindex for custom radio input without javascript?

I want to have a radio button where I can navigate and select the value using the arrow on the keyboard.
I have no problem making one:
const BareRadio = ({
id,
name,
value,
defaultChecked,
onChange,
children,
tabIndex
}) => (
<div
>
<input
type='radio'
defaultChecked={defaultChecked}
value={value}
id={id}
name={name}
onChange={onChange}
tabIndex={tabIndex}
/>
<label htmlFor={id}>
<span >
<span ></span>
</span>
<span>{children}</span>
</label>
</div>
);
But now I have a custom radio button, which the structure hide the input tag and use css to mimic the label. Can I still use tabindex to achieve the same thing? or I need to use javascript?
demo https://stackblitz.com/edit/react-ts-7lgfpk?file=index.tsx