I created a drop-down select with react-select. I import some defaultValues with this.returnLayers (an array with value/label couples) and I add the possible options from the state this.state.completeData.
Code :
<SettingRow>
<div className="selection">
<p>Sélectionner des couches</p>
<Select
defaultValue={this.returnLayers}
isMulti
name="layers"
onChange={(e) => { this.getLayers(e, this.state.categName) }}
className="basic-multi-select"
classNamePrefix="select"
options={this.state.completeData}
/>
</div>
</SettingRow>
Everything works well, until I try to delete one of the defaultValues. When I click on one of those options, all of the defaultValues disappear. The newly selected values stay though.
I followed exactly the code from the documentation, so I don't really understand what could be wrong. Is it impossible to delete the defaultValues ? Is there a workaround ?
Related
At the moment I have the following code:
<List {...props} bulkActionButtons={false}>
<Datagrid>
<DeleteButton undoable={false} />
</Datagrid>
</List>
The pop asks me if I really want to delete this item with the following UUID...
In matters of UX I have to display the title of the item to delete, NOT the UUID.
Neither do I want to use that undo stuff, so I have set it to false.
Thanks for helping!
I am using react-final-form and TextareaAutosizein my example .I am trying to get the value of text-area but not able to do that.
I am able to get value of input field but not textarea
here is my code
https://codesandbox.io/s/react-final-form-simple-example-rd3rc
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
name="operatingPinCode"
placeholder="Notes"
label="About"
/>
</div>
API link
https://final-form.org/docs/react-final-form/examples/simple
https://www.npmjs.com/package/react-textarea-autosize
Your final-form code is working fine. The problem I think lies with TextAreaAutosize, since it doesn't know how to pass data directly to your form. So you might need to add a handler on that field for the onChange event.
Based on the final form documentation, this code sample below seems to work just fine:sandbox-code Just checkout the second attempt section.
You can get value by this pop:
`onChange={(event) => {
console.log(event.target.value)
}}`
I have a list of Material UI Cards with a Select list inside each card.
const ads = this.props.ads;
let adsItems = ads.map((c, i) =>
<div key={ads[i].adid}>
<Card>
<CardHeade>
<SelectField
id={String(ads[i].adid)}
value={ads[i].status}
onChange={this.handleChange}>
<MenuItem key={1} value={`Idle`} primaryText={`Idle`} />
<MenuItem key={2} value={`Sent`} primaryText {`Sent`} />
</SelectField>
</CardHeader>
</Card>
</div>
);
Now when selecting a MenuItem I want to know which Card or selectField was changed. If I could simply pass the SelectField id in into the onChange={this.handleChange} in this case the id is ads[i].adid this would be solved simply.
I took a look at the Material UI docs and even their examples show when you select one MenuItem all the SelectFields get updated with the same value.
Is there any way I can know which Card or SelectField is being changed, that would help me greatly.
Thanks
You can just simply pass the id to change event like you said.
onChange={(event) => this.handleChange(event, ads[i].adid)}
if you do like below it won't work because you would be executing it rather than passing it as a prop.
// THIS WON'T WORK
onChange={this.handleChange(ads[i].adid)}
I was under the impression that trackBy function is used only when trying to optimize the performance of *ngFor, so that if something changes, the DOM doesn't have to be rebuild.
However, recently, I came across a situation when trackBy actually fixed a wrong behavior.
Take this for example: https://plnkr.co/edit/nRgdwoiKAMpsbmWaoMoj?p=preview
Focus on Hobbies section, especially HTML:
<div>
<h2>Hobbies</h2>
<div *ngFor="let h of user.hobbies; trackBy:customTrackBy; let i = index">
#{{i}} - {{h | json}}<br />
<input [(ngModel)]="h.name" name="hobby_name_{{i}}" /> <br /><br />
<select [(ngModel)]="h.type_id" name="type_{{i}}">
<option *ngFor="let t of types" [value]="t.id">{{t.type}}</option>
</select>
<br />
<br />
<button class="btn btn-warn" (click)="remove(i)">Remove</button>
<br /><br />
</div>
</div>
I had to explicitly define this part: trackBy:customTrackBy in the first *ngFor. If trackBy is removed, and the following steps are performed:
remove the first item
add a new item
In this case, the inputs of the first item get replaced with the content of the second item (both fields have the same content), however, the values in the model are correct.
trackBy solves this issue, but why?
I would really appreciate any kind of explanation. If this is not the right place to ask this kind of questions please redirect me to the correct one. Thanks.
update
Here's an example of the wrong behavior: https://plnkr.co/edit/u8YajKfHcPiVqY0WcJt7?p=preview remove the first item (cycling) and add a new item (add button) and see how both values get the same default value (BF will get replaced by "default value" even though the model stays correct).
*ngFor by default tracks items by object identity.
If you have primitive values like an array of strings, and use them in
<div *ngFor="let item of items; let i=index">
<input [(ngModel)]="item" name="item{{i}}">
</div>
and you edit one item, then *ngFor gets in trouble, because the identity of the edited item has changed.
With ngForTrackBy you can tell *ngFor to track the item by index, then above code will work fine when you edit fields.
Another use case is when you want *ngFor to track items by some custom object id property instead of the object identity.
I have created a select dropdown component, which I am using in a redux-form in a react-redux app. The dropdown works great, and I have no impact to performance, but in the browser I receive the following warning.
Warning: validateDOMNesting(...): <span> cannot appear as a child of <select>.
I am not sure why I recieve this error, as I am not passing in any <span> elements. Here is the code I am using to create the select dropdown (options is an array of object that contains each option's attributes. option.text is a string value that will be viewed by the user. so it could be something like 'Option 1' or 'Option 2'.)
return (
<select {...other}>
<option /> {
options.map((option) => {
return <option key={option.value} value={option.value}>{option.text}</option>
})
} </select>
)
Any ideas on why I would be receiving this warning, and how I can rectify this. I am using react 0.14.3
It seems that some extra spaces in your jsx syntax have created a span.
I've tested your code, and after a correct re-indentation the error disappeared.
Before with the error: https://jsfiddle.net/snahedis/69z2wepo/28561/
And after re-indentation: https://jsfiddle.net/snahedis/69z2wepo/28564/
You have a variable re-definition issue. Your map function parameter is called "option", so when you write <option>, react would try to treat the object referred by the variable option as a react class. Try this instead -
return (
<select {...other}>
<option /> {
options.map((optionNode) => {
return <option key={optionNode.value} value={optionNode.value}>{optionNode.text}</option>
})
} </select>
)