I am trying to render an element after checking whether there is a string e.g. "abc" present in an array. I have tried using various different functions like array.find(), array.includes(), array.some() While I do so, it gives me an error -
TypeError: null is not an object(evaluating 'o.includes')
Below is the piece of code that I am using inside render function. "abc" is the array where I am trying to check whether string "a" exists in that array, if it does then display that ExpandedHeader element.
PS: I am new to react-native.
<View>
{abc.includes("a") && <ExpandedHeader title={"Got it"}
expanded={this.state.riskRatingExpanded}
onPress={() => {this.setState({
riskRatingExpanded :!this.state.riskRatingExpanded,
basicDetailsExpanded : false,
envProfileExpanded : false,
nwswProfileExpanded : false,
additionalInfoExpanded : false,
scoresExpanded : false,
});
}}
/>}
</View>
But instead, if I do the below it works -
<View>
{abc != null && <ExpandedHeader title={abc[0]}
expanded={this.state.riskRatingExpanded}
onPress={() => {this.setState({
riskRatingExpanded :!this.state.riskRatingExpanded,
basicDetailsExpanded : false,
envProfileExpanded : false,
nwswProfileExpanded : false,
additionalInfoExpanded : false,
scoresExpanded : false,
});
}}
/>}
</View>
Your render function runs before your array data is present and initially your array data is null,
make sure you initialise your abc state as array first,
state = {
abc: []
}
with this, your first code should work.
Related
"react-admin": "^4.1.3"
I have the following field definition on the <Create> page -
<TextInput source="name"/>
<TextInput source="description"/>
<ReferenceInput label="Parent" source="parent_id" reference="categories">
<SelectInput optionText="name"/>
</ReferenceInput>
With this setup when the value for the select input is left in the blank state it results in the following variables being sent as part of the payload
{
"objects": {
"name": "Some Value",
"description": "Description",
"parent_id": ""
}
}
And results in an error
{"errors":[
{"extensions":
{
"path":"$.selectionSet.insert_categories.args.objects",
"code":"data-exception"
},
"message":"invalid input syntax for type integer: \"\""
}
]}
Which makes sense because parent_id should be null and not included in the variables array.
As a workaround I have tried adding emptyValue={null} to the <SelectInput/> component. The only change when adding this is that a javascript error is thrown when the empty row is selected in the browser.
Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
The payload remains the same with "parent_id": "" still part of the variables array.
What do I need to do in order to properly setup a <ReferenceInput/> that allows null integer values to be submitted.
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
In my vue/cli 4 / Bootstrap 4.3 app I make suggestion component(using vue-simple-suggest)
with some additive parameters and returning data I need to get slug
field of selected row and to redirect to other page
based on this slug. Search works ok for me, but when Item in selection list is selected
I see in browsers console one more request to database with whole selected item object and that
raise error.
I make:
<vue-simple-suggest
id="search_string"
v-model="search_string"
display-attribute="name"
value-attribute="slug"
:list="simpleSuggestionList"
autocomplete=off
mode="select"
#select="taskSuggestionSelected()"
></vue-simple-suggest>
and js code:
simpleSuggestionList() {
let filters={
search_string : this.search_string, // search
only_free : ( this.cbx_only_free ? 1 : 0), // additive parameters
price_min : this.tasksPriceRange[0],
price_max : this.tasksPriceRange[1],
selectedCategories : this.getSelectedCategories
}
console.log('filters::')
console.log(filters)
return axios.post(this.apiUrl + '/tasks-search', filters, this.credentialsConfig)
.then(({data}) => {
return data.tasks
})
.catch(error => {
console.error(error)
this.showPopupMessage('Tasks search', error.response.data.message, 'warn')
})
// return this.retArray
},
taskSuggestionSelected() {
console.log('\'taskSuggestionSelected par1 ::\'+par1 +" search_string::"+this.search_string::')
return false
}
1) Why error and how not to trigger request to server when item is selected and
2) how can I save/ pass slug of selected item into taskSuggestionSelected method as I need to make redirection?
"vue": "^2.6.10",
"vue-simple-suggest": "^1.10.1",
Thanks!
I'm trying to make a search bar with a list,dropdown list,
how to make a search list lik this code:
onPress={() =>this.props.navigation.navigate('LinhaDiurno03')
when an item is pressed?
....I want that each item in the list open a different screen in the application....
How can i to it?
here is the my teste:
Code to dropDown List
here some code:
var items = [
//name key is must.It is to show the text in front
{id: 1, name: 'ANA RECH', prestadora: 'UNIDOS', pos: 'P01'},
{id: 2, name: 'ARROIO DAS MARRECAS', prestadora: 'UNIDOS', pos: 'P01'},
{id: 3, name: 'VILA SECA', prestadora: 'UNIDOS', pos: 'P01'},];
onItemSelect={item => Alert.alert(" ", JSON.stringify(item.prestadora + ", LINHA: " + item.pos), [{ text: "open the especifc screen", onPress: () =>('some code here')},{ text: "bacvk", onPress: () => console.log("OK Pressed")}],{ cancelable: true })}
//onItemSelect called after the selection from the dropdown
I read the library API, you can set the navigation keys in the item, then in the onItemSelect to go to the special screen. the example code is below.
// in the item every element add a router key
const item = [
...
{
id: 8,
name: 'Swift',
key:"the navigation params" //like the example LinhaDiurno03
},
...
]
<SearchableDropdown
multi={true}
selectedItems={this.state.selectedItems}
onItemSelect={(item) => {
his.props.navigation.navigate(item.key)
}}
/>
Here is the final code, you just need to make the route before in your app...
the full code
So, I need to pass defaultValue to a react-select component with enabled multi select. I've tried everything I could think of: array of strings, array of objects, string, etc... Nothing seems to work.
I'm also using the getOptionLabel and getOptionValue, might they be the cause for all this mess?
If you refer to react-select documentation, the way to set defaultValue to multiple value select:
<Select
defaultValue={[colourOptions[2], colourOptions[3]]}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
The structure of options is
[
{
label: <string>,
value: <string>,
}
]
Working example here.
There is an alternate way to use value as your defaultValue.
In my case I have used "id" and "industry" instead of "label" and "value"
this.state = {
interested_industries: [{id:"ANY", industry:"ANY"}]
}
And in Select component:-
<Select
name="interested_industries"
options={industries}
value={interested_industries}
getOptionLabel={ x => x.id}
getOptionValue={ x => x.industry}
onChange={this.handleSelect}
isMulti
/>
defaultValue accepts an object or array of objects.
here an object can be like this :
defaultValue = {{ value: 0, label: "John" }}
This is also one way:
defaultValue = { array1[0] }
If you want array of objects for multiple options (isMulti) you can do this:
defaultValue = { array1.map(ele => ele) }
Where array1 is an array of objects.
array1 = [
{ label: "John", value: 0 },
{ label: "Indiana", value: 1 },
{ label: "Stark", value: 2 },
];
This solution worked for me. I hope this helps you too.
You can set defaultValue without index
<Select
defaultValue={existingItems}
onChange={(option) => onChangeSelect(option)}
closeMenuOnSelect={false}
components={animatedComponents}
isMulti={true}
options={options}
/>
But for this to work you need await loading items from defaultValue if you loading from server
For Example my full code
{!kindsByRestaraunt.loading ? (
<Select
defaultValue={existingItems}
onChange={(option) => onChangeSelect(option)}
closeMenuOnSelect={false}
components={animatedComponents}
isMulti={true}
options={options}
/>
): ""}
According to React documentation, you can do this:
<select multiple={true} value={['B', 'C']}>
Where B, C are the default value you want to have selected.