The code below does hides/shows if in the conditional rendering is only one element either label or text input but it doesn't work if I want to hide both elements. I need solution which will hide at least 2 or more elements.
{trueMode === false && (<label htmlFor="car">Car</label> &&
<input onChange={handleChange} id="car"
value={newVehicle.car} type="text" />)}
You have to wrap the elements with a fragment for example
{trueMode === false && (
<>
<label htmlFor="car">Car</label>
<input onChange={handleChange} id="car" value={newVehicle.car} type="text" />
</>
)}
Related
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
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)} }} />
I am new in react, I have certain domain in JS, I imagine this is a simple question but I have been searching for 2 hours and I haven't found a satisfactory answer :(
I have the check boxes:
<Col md="4">
<FormGroup>
<Label>Have Children</Label>
<CustomInput type="radio" name="customRadio" label="Yes" value="yes" />
<CustomInput type="radio" name="customRadio" label="No" value="no" />
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label>Have Spouse</Label>
...(same as children input)
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label>Have Family Members</Label>
...(same as children input)
</FormGroup>
</Col>
If you click on "have children"
I want that some divs after, related to children, to be displayed. If not, they should be hidden. And the same for the other options.
I want to know what is the cleanest way to do this.
The checkbox should toggle a boolean in state.
You then conditionally render the children if the value in state is true.
So attach a checked value and change handler to your groups:
<FormGroup>
<Label>Have Children</Label>
<CustomInput type="radio" name="customRadio" label="Yes" value="yes" onChange={() => this.handleChange} checked={this.state.visibility} />
<CustomInput type="radio" name="customRadio" label="No" value="no" onChange={() => this.handleChange} checked={!this.state.visibility}/>
</FormGroup>
The create the state value in your class and toggle it with the handleChange method
state = {visibility: false}
handleChange = () => this.setState({visibility: !this.state.visibility})
Then you can conditionally render your thing based on the visibility boolean, so...
<div>{this.state.visibility && <p>Now You see me</p>}</div>
Just think of the data structure beforehand.
From your question, I assume you simply want something like this:
If children checkbox is checked, show elements related to children
If spouse checkbox is checked, show elements related to spouse.
etc.
The way I see it, you need an array of checkboxes with each of their statuses (checked or not). You can store this information in the component state.
// in the constructor
this.state = {
checkboxes: [
{ id: 1, label: 'children', checked: false },
{ id: 2, label: 'spouse', checked: false },
],
}
Then, in your render() function, you just need to loop through the array like this:
const { checkboxes } = this.state;
return (
<div>
{checkboxes.map((checkbox, index) => (
<div>
<label>{checkbox.label}</label>
<input type="checkbox" checked={checkbox.checked} onClick={() => this.toggleCheckBox(index)} />
{checkbox.checked && <div>show this if the checkbox is checked</div>}
</div>
))}
</div>
);
Just remember to implement this.toggleCheckBox method in the class. If you are unsure of how to do it, here's a codesandbox for you to check out.
<Draggable axis="y"
grid={[135,135]}
onStop={this.handleStop}
defaultPosition={{x: this.props.task.positionX, y: this.props.task.positionY,}}>
<div id="edit-task-component">
<form onSubmit={this.handleSubmit} id="edit-task-form" className="edit-task-form">
<input type="text" name="name" onChange={this.handleChange} placeholder="Name" value={this.state.name} required/>
<input type="text" name="description" onChange={this.handleChange} placeholder="Description" value={this.state.description} required/>
<button className="btn submit-btn" type="submit">Save </button>
</form>
</div>
</Draggable>
What happens is I will click on the input and it will focus for a split second then loses focus -- so i cant type in the input. I have to click on it a few times for it to actually focus, therefore allowing me to type in the input. How can I get it to stay focused after clicking once? I have tried setting autofocus to true after clicking the input but that didnt work either. Any ideas ?
Use enableUserSelectHack, this will not interfere with existing style
eg <Draggable enableUserSelectHack={false}>
Use cancel prop
eg: give any class name, it doesn't matter
<Draggable cancel=".just-name">
<input className="just-name" placeholder="Add text here" />
</Draggable>
Via a handle to enable drag is better and you can also avoid this kind of issue easily.
Here is the demo given by the official doc:
return (
<Draggable
axis="x"
handle=".handle"
start={{x: 0, y: 0}}
grid={[25, 25]}
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div>
<div className="handle">Drag from here</div>
<div>This readme is really dragging on...</div>
</div>
</Draggable>
);
check its doc
the handle here is a CSS selector
Hi so I have this fiddle here http://jsfiddle.net/cmrunhow/5/ and it is working fine. However I was wondering why can't I replace
var clickHandler = this.props.onRatingSelected && this.props.onRatingSelected.bind(null, i);
items.push(<li key={i} className={i <= this.props.value && 'filled'} onClick={clickHandler}>{'\u2605'}</li>);
with
items.push(<li key={i} className={i <= this.props.value && 'filled'} onClick={this.props.onRatingSelected.bind(null, i)}>{'\u2605'}</li>);
assuming I skip the sanity check.
in your fiddle FundooRating component is called with and without onRatingSelected props.
<div>
Rating is {this.state.rating} <br/>
Clickable Rating <br/>
<FundooRating value={this.state.rating} max="10" onRatingSelected={this.handleRatingSelected.bind(this)} />
<br />
Readonly rating <br/>
<FundooRating value={this.state.rating} max="10" />
</div>
so you will have to check for null case in replaced code too
items.push(<li key={i} className={i <= this.props.value && 'filled'} onClick={this.props.onRatingSelected && this.props.onRatingSelected.bind(null, i)}>{'\u2605'}</li>);
Sample Fiddle
You need the check for
this.props.onRatingSelected
because you have an instance of FundooRating your where you don't pass a handler as a prop:
<FundooRating value={this.state.rating} max="10" />
(just below the Readonly text).