I am using react native material ui component to select value and
set it. But selected value does not stay on the screen. Cannot see the
selected value. Why so?
`
onChangeHandler = (e) => {
this.setState({
selectValue: e
});
}
render() {
sports = [
{ value:'Basketball' },
{ value:'Football' },
{ value:'Tennis' },
{ value:'Volleyball' }
];
<Dropdown
value={this.state.selectValue}
data = {sports}
style={styles.Dropdown1}
onChangeText = {(event) => this.onChangeHandler(event)}
><Dropdown>
}
Try to console.log() the event you are passing, and see what is raised in that event
I would try something like the following:
onChangeHandler = (evt) => {
this.setState({
selectValue: evt.target.value
});
}
render() {
sports = [
{ value:'Basketball' },
{ value:'Football' },
{ value:'Tennis' },
{ value:'Volleyball' }
];
<Dropdown
value={this.state.selectValue}
data = {sports}
style={styles.Dropdown1}
onChangeText = {this.onChangeHandler}
><Dropdown>
}
Related
I am trying to add a select all checkbox inside v-select. It's working fine with options API in vue js. But when working with composition API, couldn't find a way to workable it yet. My attempt is as below.
setup() {
const fruits = ['Apples', 'Apricots', 'Avocado', 'Bananas']
let selectedFruits = []
const likesAllFruit = computed(() => {
return selectedFruits.length === fruits.length
})
const likesSomeFruit = computed(() => {
return selectedFruits.length > 0 && !likesAllFruit.value
})
const icon = computed(() => {
if (likesAllFruit.value) return 'mdi-close-box'
if (likesSomeFruit.value) return 'mdi-minus-box'
return 'mdi-checkbox-blank-outline'
})
const toggle = async () => {
if (likesAllFruit.value) {
selectedFruits = []
} else {
selectedFruits = fruits.slice()
}
await nextTick()
}
return {
fruits,
selectedFruits,
likesAllFruit,
likesSomeFruit,
icon,
toggle,
}
},
I used https://vuetifyjs.com/en/components/selects/#append-and-prepend-item to build this as per in the document. Anyone knows where I was wrong this with in composition API?
(I am using vue js 2 version with composition API plugging)
Below way works.
setup() {
const fruits = ref([
{ text: 'Apples', value: 'Apples' },
{ text: 'Apricots', value: 'Apricots' },
{ text: 'Avocado', value: 'Avocado' },
{ text: 'Bananas', value: 'Bananas' },
])
let selectedFruits = ref([{}])
const likesAllFruit = computed(() => {
return selectedFruits.value.length === fruits.value.length
})
const likesSomeFruit = computed(() => {
return selectedFruits.value.length > 0 && !likesAllFruit.value
})
const icon = computed(() => {
if (likesAllFruit.value) return 'mdi-close-box'
if (likesSomeFruit.value) return 'mdi-minus-box'
return 'mdi-checkbox-blank-outline'
})
const toggle = async () => {
if (likesAllFruit.value) {
selectedFruits.value = []
} else {
selectedFruits.value = fruits.value.slice()
}
await nextTick()
}
return {
fruits,
selectedFruits,
likesAllFruit,
likesSomeFruit,
icon,
toggle,
}
},
Thanks all!!!
In console, I can get this.state.data in render. Everything looks normal. But I get this.state.data.map is not a function error. What am I doing wrong?
I would be very happy if there is someone who can help. Thanks in advance
export default class ProfileScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
hash: '',
};
}
_retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('token');
console.log(value);
this.setState({
hash: value,
});
} catch (error) {
// Error retrieving data
}
};
getInfo = async () => {
try {
const response = await axios.get('http://yakakartim.net/museb/kollektif/loginInfo?hash=' + this.state.hash);
this.setState({
data: response.data.message
})
} catch (e) {
console.log(e)
}
};
componentDidMount() {
this._retrieveData();
this.getInfo()
}
list = () => {
return this.state.data.map(info => {
return (
<View style={{ margin: 10 }}>
<Text>{info.email}</Text>
</View>
);
});
};
render() {
console.log('render',this.state.data)
console.log('render',this.state.hash)
return <View>{this.list()}</View>;
}
}
This is because you are updating the data variable which is initially an array in state but later in getInfo function you have update it like this
this.setState({
data: response.data.message
})
I dont know what is in "message". But if it is not an array, then map function will not work with "data" as it only works with variables which are iterate-able. I mean which are of array data type.
thanks, the incoming data is not an array. I found the solution like this.
this.setState({
data: [response.data.message]
})
I have a very simple component which set state values using axios. However, the state value is being changed in the render method.
constructor(props) {
super(props);
const { navigation } = this.props;
const approveID = navigation.getParam('approveID', '0');
this.state = {
selectedApprove: approveID,
reason: '',
};
}
componentDidMount() {
const { navigation } = this.props;
const tenantID = navigation.getParam('tenantID', '0');
this.getReviewApp(tenantID);
}
getReviewApp(tID) {
axios.get('http://myserver/getData', {
params: {
method: 'getApplicantReview',
tenantID: tID
}
}).then((response) => {
const result = response.data.DATA[0];
this.setState({
selectedApprove: result[0],
reason: result[1]
});
}).catch((error) => {
// handle error
console.log(error);
});
}
...
render() {
console.log(this.state);
...
}
When I run the app the console shows 2 times. First is perfect:
Object {
"reason": "Test",
"selectedApprove": "Yes",
}
The second log is with null values and it messes up my component:
Object {
"reason": null,
"selectedApprove": null,
}
Why is it happening?
Thanks
The response object must not look like what you think it looks like.
I have a modal and I am trying to dynamically update the text.
in my data
return {
count: {
value: 5
},
}
then I have a method
bulkUserImport: function() {
this.isLoading = true;
let _this = this;
axios.post('bulkUpdate', {'csv': this.importData})
.then((r) => console.log(r))
.then(() => this.isLoading = false)
.then(function() {
_this.$modal.show('dialog', {
title: 'Adding your new Clients',
text: `Jobscan is now provisioning your accounts, page will refresh in ${_this.count.value} seconds.`,
buttons: [
{
default: true,
handler: () => _this.$emit('close'),
}
]
});
_this.test()
})
.then(() => this.reloadClients());
},
Then the test method
test: function(){
if(this.count.value > 0){
this.count.value = this.count.value - 1;
console.log(this.count.value);
let temp = this;
setTimeout(function(count){
temp.test();
}, 1000);
}
},
In the text in the modal I have a variable _this.count.value that prints out 5. Then I have a call to _this.test() to update the variable.
In test(). I console.log the results and the number does go down
However, it is not updating the _this.count.value in the text. What am I doing wrong?
Here is the modal
I am already working on Pagination.
I used PaginationContainer for that. It work’s but no way what I am looking for.
I got button next which call props.relay.loadMore(2) function. So when I click on this button it will call query and add me 2 more items to list. It works like load more. But I would like instead of add these two new items to list, replace the old item with new.
I try to use this getFragmentVariables for modifying variables for reading from the store but it’s not working.
Have somebody Idea or implemented something similar before?
class QueuesBookingsList extends Component {
props: Props;
handleLoadMore = () => {
const { hasMore, isLoading, loadMore } = this.props.relay;
console.log('hasMore', hasMore());
if (!hasMore() || isLoading()) {
return;
}
this.setState({ isLoading });
loadMore(1, () => {
this.setState({ isLoading: false });
});
};
getItems = () => {
const edges = idx(this.props, _ => _.data.queuesBookings.edges) || [];
return edges.map(edge => edge && edge.node);
};
getItemUrl = ({ bid }: { bid: number }) => getDetailUrlWithId(BOOKING, bid);
render() {
return (
<div>
<button onClick={this.handleLoadMore}>TEST</button>
<GenericList
displayValue={'bid'}
items={this.getItems()}
itemUrl={this.getItemUrl}
emptyText="No matching booking found"
/>
</div>
);
}
}
export default createPaginationContainer(
QueuesBookingsList,
{
data: graphql`
fragment QueuesBookingsList_data on RootQuery {
queuesBookings(first: $count, after: $after, queueId: $queueId)
#connection(
key: "QueuesBookingsList_queuesBookings"
filters: ["queueId"]
) {
edges {
cursor
node {
id
bid
url
}
}
pageInfo {
endCursor
hasNextPage
}
}
}
`,
},
{
direction: 'forward',
query: graphql`
query QueuesBookingsListQuery(
$count: Int!
$after: String
$queueId: ID
) {
...QueuesBookingsList_data
}
`,
getConnectionFromProps(props) {
return props.data && props.data.queuesBookings;
},
getFragmentVariables(prevVars, totalCount) {
console.log({ prevVars });
return {
...prevVars,
count: totalCount,
};
},
getVariables(props, variables, fragmentVariables) {
return {
count: variables.count,
after: variables.cursor,
queueId: fragmentVariables.queueId,
};
},
},
);
As I figure out, there are two solutions, use refechConnection method for Pagination Container or use Refech Container.