I have different groups of radio button within a form on this way:
<form onSubmit={handleSubmit}>
{FormData.map(formDetails => {
return (
<div className='form-options' key={formDetails.id}>
<h2 className='form-option__title'>{formDetails.title}</h2>
<p className='form-option__description'>
{formDetails.description}
</p>
<fieldset>
{formDetails.options.map(formOptions => {
const getScore = e => {
setCheck(formOptions.id);
if (typeof formOptions.value === 'string') {
setScore(0);
} else {
setScore(e.target.value);
}
};
return (
<RadioOption
key={formOptions.id}
htmlFor={formOptions.id}
type='radio'
id={formOptions.id}
name={formOptions.name}
value={formOptions.value}
onChange={getScore}
checked={check === formOptions.id}
/>
);
})}
</fieldset>
</div>
);
})}
...
</form>
What happens is that when I select a radio option in a different fieldset, it doesn't keep the option selected in the previous one.
Found the solution. The main mistake was on the name attribute, each radio button had a different name. Changed it to be the same within the group, and working. Also updated the onChange function and created different components.
Related
I am having issues correcting mysyntax in a React project. I get the error "Warning: Use the defaultValue or value props on instead of setting selected on ." However, I am unable currently to dynamically update the selected option for the drop down menu using just value/default value. The code updates 'correctly' when selected is used.
Relevant code below:
const Client = ({..., reactions}) => {
...
List Generator
function ReactionList() {
// retrieve and filter reactions
const availableReactions = reactions.filter(...)
return (
availableReactions.map((reaction, index) =>
<option key={index} value={reaction._id} selected={chosenReaction.name === reaction.name}>
{reaction.name}
</option>
)
)
}
// selecting reaction from drop down
function SelectReactionOption(entry){
setSelectedReactionId(entry);
setReactionPsiUpcast(0);
}
return (
...
<div className="DropDown">
<div>
<p>
Actions:
</p>
<select type="number" name={chosenAction.name} onChange={e => SelectActionOption(e.target.value) }>
<ActionList/>
</select>
</div>
</div>
I have an update for anyone that is reading this....
I think I've found the issue - when you set a toggle switch to checked it's also set to READONLY. So I can't toggle the toggle switch now.
I have a toggle component of type checkbox in React.
products is a locally set array for testing purposes as this.props.products is empty for now.
Through testing, I've noticed that if I use:
selected={(products.indexOf(p) > -1)} the toggles stop working. They display correctly but I'm not able to toggle them. They do not appear disabled or are set to disabled in HTML element.
products=['ProdA', 'ProdB', 'ProdC];
customerProducts.forEach(p => {
content(): string[] {
const toggles = [];
if(isEnabled){
toggles.push(
<ToggleComponent
value={p}
selected={(products.indexOf(p) > -1)}
onChange={this.props.onChange}
disabled={false}
/>
);
}
render() {
{this.content()}
}
//TOGGLE COMPONENT
render() {
const {id, title, disabled, name, value, selected} = this.props;
return (
<div>
<fieldset>
<div className="form-structure">
<label className={!this.props.disabled ? 'checkbox-switch-label' : 'checkbox-switch-label checkbox-switch-label-disabled'}>
<input id={id} type="checkbox" checked={selected} className="checkbox-switch" role="Switch" disabled={disabled} name={name} value={value} onChange={this.validate} />
<span/>{title}
</label>
</div>
</fieldset>
</div>
)}
I can see there is an invalid Event Listener in my dev Tools: dispatchDiscreteEvent
The toggles are appearing, are not visibly disabled, (there is no disabled attribute in the html element), but clicking them does not toggle them on/off.
Am I supposed to be setting 'disabled' against a state value instead?
I already have an onChange function elsewhere for getting the values.
Before Clicking anything text field should be disable . when after the radio button selected my text field must be enable.
This is the working solution of your question.
class App extends React.Component {
state = {
isRadioSelected: true
};
changeHandler = () => {
this.setState({ isRadioSelected: false });
};
render() {
return (
<div className="App">
<h3>Input text is {this.state.isRadioSelected ? 'Disabled': 'Enabled'}</h3>
<input type="text" disabled={this.state.isRadioSelected} />
<br />
<label>Select Radio Button</label>
<input type="radio" onChange={this.changeHandler} />
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />
Your description is pretty vague and you don't have any code samples, but here's likely what you want to do:
Make the radio button a controlled component, so that you can access it's value within React's state.
Tie the input's disabled attribute to the value of that state field.
It also seems like you want a checkbox, and not a radio button, since a radio button cannot be untoggled if there is only a single radio button.
This code will likely not work as-is (I haven't run it), but should provide a starting idea:
function Tester() {
const [radioValue, setRadioValue] = useState(false)
return (
<div>
<input type="radio" onClick={(e) => setRadioValue(e.target.value)} value={radioValue} />
<input type="text" placeholder="your input box" disabled={!radioValue} />
</div>
)
}
i want to filter data based on the search query entered in input field from the values selected in dropdown menu.
What i am trying to do?
Consider the image below
From the select dropdown option user can select both messages and info or either of the options. Based on the option selected from dropdown menu and search query entered in the search input field it should filter data.
Suppose if user selected messages and entered search query "hello" it should retrieve messages containing text "hello" and similarly with info and messages option as well.
I am not sure how to do this. Could someone help me solve this?
Below is the code,
<div className='wrapper'>
<div>
{!state.expanded && <Svgsearch/>}
{state.expanded && props.active && <div onClick=
{this.collapse_input}><Svgsearch/></div>}
{state.expanded &&
<div className="search_input">
<input type="text" placeholder="search query" />
</div>}
<div className="search_dropdown">
<FieldDropdown on_dropdown_toggle=
{this.handle_dropdown_toggle} />
</div>
</div>
</div>);
export default class FieldDropdown extends react.component {
render = () => {
return (
<Dropdown className="category_dropdown" on_dropdown_open=
{this.handle_dropdown_open} on_dropdown_close=
{this.handle_dropdown_close}>
<div>
<button>{dropdown_text}</button>
</div>
{state.options.map((option, i) => {
return (
<DropdownItem key={i} on_select=
{this.handle_option_selection} value={i}>
<input type="checkbox" value={option.value}
checked="true" readOnly />
<span>
{option.text}</span>
</DropdownItem>)
})}
</Dropdown>);
};
Consider i have messages and info in an array of objects.
How can i write a method to filter data based on option selected from dropdown.
Thanks.
Html for query field
<input
id="searchId"
type="text"
value={this.state.queryValue}
onChange={this.handleTextChange}
/>
State
state = { data: [], filteredData:[],queryValue: '' ,value:'' };
Event Handling Method
handleTextChange = event => {
//read the value of the textbox with event.target.value
const filteredData = this.state.data.filter(d =>
// object where condition based on value(options value) & queryValue
);
this.setState({ queryValue: event.target.value, filteredData});
};
and bind UI to the filteredData.
I'm using react-bootstrap-typeahead and I would like all available options to be shown if the input value is an exact match to one of them. I mean if the user writes a value that matches with one of the options I want to display all the options (and make the matched one active) instead of just the one that matches.
I tried using the renderMenu prop of Typeahead but I'm unable to achieve the expected behavior. This is my code:
render() {
let options = this.state.options;
let optionsValues = this.state.options.map(v => v.value);
let value = this.state.inputValue;
if ( optionsValues.includes(value) ) {
const TypeaheadMenuItem = menuItemContainer(MenuItem);
return (
<div className="col-4">
<label className="form-group has-float-label" name={this.props.name}>
<Typeahead
labelKey="value"
onInputChange={this.updateInputValue}
selected={[this.state.inputValue]}
options={options}
placeholder={this.props.name}
selectHintOnEnter={true}
disabled={this.props.disabled}
renderMenu={(results, menuProps) => {
return (
<Menu {...menuProps}>
{options.map((opt, ind) =>
<TypeaheadMenuItem option={opt} key={ind} position={ind} active={opt.value==value}>
{opt.value}
</TypeaheadMenuItem>
)}
</Menu>
);
}}
/>
<span><b>{this.props.name}</b></span>
<div className="invalid-feedback"></div>
</label>
</div>
)
}
}
I can see the options but for some reason all the options have the prop active as true.
Actual Behavior
Here is a screenshot of how my component behaves right now:
https://gyazo.com/9cbb9842654d681f7ff3e1a2e663e09e