I'm to react and I'm getting this error when setting up my drop down list
<FormGroup className="form-group">
<label htmlFor="services_dropdown">Service</label>
<FormControl
id="services_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{serviceDropDown}
</FormControl>
</FormGroup>
<FormGroup>
<label htmlFor="tarifications_dropdown">Tarification</label>
<FormControl
id="tarifications_dropdown"
componentClass="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}>
{usersDropDown}
</FormControl>
</FormGroup >
The error is giving me a hard time and this is it:
nput is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
usersDropDown and servicesDropDown return a list mapped from a list in state
FormControl defaults to input when as property is not specified.
To use it as a select, you have to provide:
<FormControl
id="tarifications_dropdown"
componentClass="select"
as="select"
placeholder="select"
onChange={this.handleSelect.bind(this)}
>
{usersDropDown}
</FormControl>
Form.Control API in docs
Related
How can I solve the overlap issue in InputLabel and OutlinedInput in Material UI?
codesandbox
<FormControl>
<InputLabel htmlFor="my-input">Email address</InputLabel>
<OutlinedInput id="my-input" aria-describedby="my-helper-text" />
<FormHelperText id="my-helper-text">
We'll never share your email.
</FormHelperText>
</FormControl>
<hr />
<br />
<FormControl>
<InputLabel shrink={true} htmlFor="my-input">
Email address
</InputLabel>
<OutlinedInput id="my-input" aria-describedby="my-helper-text" />
<FormHelperText id="my-helper-text">
We'll never share your email.
</FormHelperText>
</FormControl>
Result:
I tried the shrink={true} but it's not working.
You have to add "label" attribute in OutlinedInput tag.
<OutlinedInput id="my-input" aria-describedby="my-helper-text" label="Email address"/>
I am using react material ui library
https://material-ui.com/components/checkboxes/
I need to have form group with checkbox and input type search inside. So i use the two components
from this library
<FormControl id="inline-form-group">
<FormLabel component="legend">Choose Columns:</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleCheckboxesChange} name="gilad" />}
label="Gilad Gray"
/>
</FormGroup>
<FormGroup>
<TextField id="standard-search" label="Column value" type="search" />
</FormGroup>
</FormControl>
but now textfield is under the checkbox
I want to have them inline.
I can't find in their documentation option like this
In the label position of your FormControlLabel you could put in your TextField.
This would work if you don't need to have the Gilad Gray as your curretn label.
<FormControlLabel
control={<Checkbox checked={true} onChange={handleChange} name="jason" />}
label={<TextField />}
/>
```
Im trying to set a value / placeholder for Form.Control but nothing works.
<Form.Row>
<Form.Label>Select Operator:</Form.Label>
<Form.Control as="select" value="" name="operator" onChange={this.handleChange} disabled={shouldDisable}>
{
operators.map(operator => {
return <option key={operator}>{operator}</option>
})
}
</Form.Control>
</Form.Row>
I want that the Default value will be Choose Operator... which cannot be selected (not trigger onChange) add value, defaultValue, placeholder didnt work
Reading React-Bootstrap docs there is no such possibility for that. My suggestion is to create a first option where its value is an empty string ''. As well I would suggest to set the value property on Form.Control to follow React guidelines to have a controlled state:
<Form.Row>
<Form.Label>Select Operator:</Form.Label>
<Form.Control as="select" value={this.state.selectedOperator} name="operator" onChange={this.handleChange} disabled={shouldDisable}>
<option key={'initial'} value="">Choose Operator...</option>
{
operators.map(operator => {
return <option key={operator} value={operator}>{operator}</option>
})
}
</Form.Control>
</Form.Row>
I am creating a modal to filter for profiles, on react-bootstrap and redux.
I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:
value={rangeValue}
But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.
<Form.Check
inline
label="male"
name="male"
checked <-----------
onChange={(e) => onRadioChange(e)}
/>
I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.
The returned JSX below
import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
...
<Form>
<div className="form_content_wrap">
<Form.Group>
<Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
<Form.Control
type="range"
className="form-control-range"
id="formControlRange"
min="0"
max="100"
value={rangeValue}
onChange={(e) => setRangeValue(e.currentTarget.value)}
/>
</Form.Group>
<Form.Group>
<Form.Label htmlFor="formControlRange">Gender: </Form.Label>
<Form.Check
inline
label="female"
name="female"
onChange={(e) => onRadioChange(e)}
/>
<Form.Check
inline
label="male"
name="male"
checked <<<------- THIS IS WHERE I WANT TO CHANGE
onChange={(e) => onRadioChange(e)}
/>
</Form.Group>
<Form.Group>
<Form.Label>Keyword</Form.Label>
<Form.Control
type="text"
placeholder="search description"
value={descValue}
onChange={(e) => setDescValue(e.currentTarget.value)}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
onClick={onFormSubmit}
style={{ marginRight: "10px" }}
>
Submit
</Button>
<Button variant="primary" type="submit" onClick={onFormClear}>
Clear
</Button>[enter image description here][1]
</div>
</Form>
Thanks
React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.
<Form.Check checked={true} />
<Form.Check checked={false} />
I am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
but it only rendered one line's input.
Edited: using textarea, the font seems to be very tiny.
The following snippet fixes the described issue:
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows="3" />
</Form.Group>
The componentClass prop of a FormControl is "input" by default, which renders a text input.
A text input is single line.
So try setting the componentClass prop of FormControl to "textarea":
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl componentClass="textarea" value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>