score:23
i didn't test this, but from the react bootstrap source code for formcontrol it seems like using defaultvalue
prop should work:
<formcontrol type="select"
ref="templateselect"
defaultvalue={this.state.templateid}
onchange={this.handletemplatechange}>
{options}
</formcontrol>
if multi select defaultvalue must be array:
this.state = {
templateid:['some value']
}
<formcontrol
multiple
type="select"
ref="templateselect"
defaultvalue={this.state.templateid}
onchange={this.handletemplatechange}>
{options}
</formcontrol>
score:1
this way you can set the default value.
<option >is any default</option>
{
dataoption.map(item => {
return <option key={item.value} vlaue={item.value} selected={defaultselect ? defaultselect == item.value ? true : false : false} >{item.text}</option>
})
}
</formcontrol>
you may receive an error in the console:
warning: use the defaultvalue
or value
props on instead of setting selected
on .
but setting defaultvalue or value does not solve your problem
score:1
(hi googlers!)
if you are attempting to load an array of options into the form-control (by a network-call, promise or other async function) make sure you dont render the select-field until the options-array has been fully loaded. or else the defaultvalue wont work.
(true for react-bootstrap 1.0.0-beta.8. your mileage may wary.)
score:5
with "react-bootstrap": "1.0.0-beta.14"
, the value
prop is used:
<form.control as="select" value={user}>
{ users.map(opt => (<option>{ opt }</option>)) }
</form.control>
Source: stackoverflow.com
Related Query
- Specify default value to FormControl of react-bootstrap
- React bootstrap default selected value for dropdown
- How to send value to state using react bootstrap FormControl dropdown?
- Default property value in React component using TypeScript
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- React Input Element : Value vs Default Value
- React & TypeScript: Avoid context default value
- React | Ant design select default value
- react bootstrap readonly input within formcontrol
- Providing default value for function prop in React
- How to modify the default value of a Material UI prop-function in React JS?
- React useState does not seem to accept a default value here?
- React Bootstrap get value from form on submit
- React Formik Default value
- Issue with async default value in React Material UI Autocomplete
- React TypeScript 2.3 -> typesafe React Bootstrap FormControl onChange
- What is default css display value for react web application?
- Trying to get a React controlled input to have a default value
- Setting a default value on a react select dropdown that is populated from an API call
- React - How to set default value in react-select
- unable set a default value in redux-form w. react
- how to set default value in select using react js
- Default function value in React component using Typescript
- React route params with default value
- How do I set a default value for a select menu in my React form component?
- React input text default value and onblur function make input text read only
- How to get value of Form.Control - React Bootstrap Date Picker?
- Default function parameter value from React component state
- Set <select> default value with redux-form in React
- how to calculate default value for react js state hook with a function?
More Query from same tag
- yarn build --production causes error while yarn build not
- React app does not set json data to a state, but can console.log set data
- Why does this component render twice?
- How can I add an active class to img tag which is wrapped inside a Navlink?
- How can I pass props to JSX reference?
- dynamic label width textfield outlined material ui react
- this.state inside setState ReactJS
- Facebook Comments plugin in React/Node.js app only shows on refresh
- Image is not loading in server side rendering with react
- NextJS: Epoch time to date
- Markdown in Antd
- useState results in shallow copy of initial value
- What is best practice to communicate between React components and services?
- React routing works on local machine but not on GitHub pages
- Update happening before state change due to promise?
- Reactjs npm test: Jest encountered an unexpected token
- React not doing deep comparing of defaultProps
- Pass props to image url but also use objectFit
- reactJS - How to get rid of hardcoded URL in home.js?
- How to call setState function onClick ES6 way
- Debounce won't execute request max once per second
- Get the timing when data renderd in a react component in reactjs hook
- Heroku[router]: at=error code=H10 desc=”App crashed“ method=GET path=/favicon.ico”
- How Do I Pass State (Value) when Calling Component in React?
- How to communicate between a parent/child component when parent's children dynamically defined via `children` from a grandparent component?
- How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?
- how to check the response status and display content message accordingly in react js
- Computed Key from Symbol in Typescript Interface
- React toggle button after mapping through list
- How to use a connected-to-Redux-Higher-Order-Component inside a Component which is also connected to Redux