I am working on a nested state. And after a certain event(on form submit), I want to reset the form input field to the initial state, and also its flags(for a controlled component). But I am not able to that.
My initial State looks like this:
state = {
orderForm: {
name: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Your Name",
},
value: "",
validation: {
required: true,
},
valid: false,
},
address: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Your Address",
},
value: "",
validation: {
required: true,
},
valid: false,
touched: false,
},
email: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Your Email",
},
value: "",
validation: {
required: true,
},
valid: false,
touched: false,
},
mobile: {
elementType: "input",
elementConfig: {
type: "text",
placeholder: "Your Phone",
},
value: "",
validation: {
required: true,
length: true,
},
valid: false,
touched: false,
},
addressType: {
elementType: "select",
elementConfig: {
options: [
{ value: "home", displayValue: "Residental" },
{ value: "office", displayValue: "Commerical" },
],
},
value: "home",
validation: {
required: false,
},
valid: true,
},
},
formIsValid: false,
};
And when I submit my it looks like,
{
"orderForm": {
"name": {
"elementType": "input",
"elementConfig": {
"type": "text",
"placeholder": "Your Name"
},
"value": "abc",
"validation": {
"required": true
},
"valid": true,
"touched": true
},
"address": {
"elementType": "input",
"elementConfig": {
"type": "text",
"placeholder": "Your Address"
},
"value": "123 - xyz",
"validation": {
"required": true
},
"valid": true,
"touched": true
},
"email": {
"elementType": "input",
"elementConfig": {
"type": "text",
"placeholder": "Your Email"
},
"value": "a#bc.com",
"validation": {
"required": true
},
"valid": true,
"touched": true
},
"mobile": {
"elementType": "input",
"elementConfig": {
"type": "text",
"placeholder": "Your Phone"
},
"value": "1234567890",
"validation": {
"required": true,
"length": true
},
"valid": true,
"touched": true
},
"addressType": {
"elementType": "select",
"elementConfig": {
"options": [
{
"value": "home",
"displayValue": "Residental"
},
{
"value": "office",
"displayValue": "Commerical"
}
]
},
"value": "office",
"validation": {
"required": false
},
"valid": true,
"touched": true
}
},
"formIsValid": true
}
So I tried this method, which I tried to reset it using the previous state but I am not able to do it. I know I can do it by storing it in a variable see link but don't want to use this. And using the Spread operator for making copies for each is too much tedious.
my method which I tried, it's not working.
this.setState(
(prevState) => {
const orderForm = [...prevState.orderForm];
return { orderForm };
},
() => {this.props.history.push("/orders")}
);
I know there could be better way to that. And I don't want to use any helper library.
Thank you.
Will this work,
this.setState(prevState=>({
return {
...prevState,
// spread your initial state.
}),()=>console.log(your state));
Now there can be different scenarios, I don't if your state is at your component level or at redux level. But in both ways you can access your initial state. If it's at component level, it's pretty easy.
If you're using redux, then you can make use of Selectors and get your initial state as props from your redux or any other state management library you're using.
Related
blocks: [
{
type: 'actions',
block_id: 'recognize',
elements: [
{
type: 'button',
action_id: 'add_recognition',
text: {
emoji: true,
type: 'plain_text',
text: ':raise_hands: Recognize someone',
},
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Click Me",
"emoji": true
},
"value": "click_me_123",
"action_id": "view_all"
}
]
]
I want to get the next action element with action_id view_all.I tried with actions[1].action_id but it says undefined.
What am I missing or how to get that action element.
I am using reactjs-form-builder for generating forms in react js my fields object is
this.state = {
id: null,
loading: true,
fields: {
"fields": {
"name": {
'label': "Product Name",
"type": "text",
"required": true,
"placeholder": true,
}
"submit": {
"type": "submit",
"label": "Edit Product",
"color": "btn-primary",
}
}
}
};
How do i set value to field name.
Just add value in you field object.
"name": {
'label': "Product Name",
"type": "text",
"required": true,
"placeholder": true,
"value": "You value here",
}
Hello I am new in Loopback
Here I am using loopback, mongodb, currently I have two collection with me, i.e. Company and Employee.
In employee collection, I am referring the company as a foreign key in employee table(means collection in mongo).
Company.json
"properties": {
"_id": {
"type": "number"
},
"name": {
"type": "string",
"required": true
}
},
"validations": [],
"relations": {
},
Employee.json
"properties": {
"name": {
"type": "string",
"required": true
},
"age": {
"type": "number",
"required": true
},
"department": {
"type": "string",
"required": true
},
"city": {
"type": "string",
"required": true
},
"salary": {
"type": "number",
"required": true
},
"componyId": {
"type": "objectid",
"required": true
}
},
"validations": [],
"relations": {
"compony": {
"type": "belongsTo",
"model": "Company",
"foreignKey": "componyId"
}
},
Please let me where I am get in wrong here...
empoyee.js
module.exports = function(Employee) {
console.log('Employee....:', Employee);
Employee.findSalary = function(value, cb) {
console.log('Employee value....:', value, cb);
Employee.find({
where: {
salary: {
gte: value,
},
},
include: {
relation: 'compony',
},
}, cb);
};
Employee.remoteMethod('findSalary', {
accepts: {
arg: 'salary',
type: 'number',
},
returns: {
arg: 'salarys',
type: 'array',
},
http: {
path: '/find-salary',
verb: 'get',
},
});
};
Thanks,
I think you should remove this part:
"componyId": {
"type": "objectid",
"required": true
}
and
include: {
relation: 'compony',
}
could be just
include: 'compony'
and I think you have a typo in 'compony' but you consistently use this name so it shouldn't be an origin of a problem just a side note
I have been beating my head against this all day, and cannot seem figure out how to get this to work.
I have a source document like this:
{
"created_at": 1454700182,
"message_id": 160,
"user_id": 1,
"establishment_id": 1,
"geo": {
"coordinates": [-4.8767633,
89.7833547
],
"type": "Point"
},
"message": "Venus is in the west",
"active": true,
"score": 0,
"name": {
"first": "First",
"last": "Last"
},
"neighborhood": "Townside"
},
I create a document like this in ElasticSearch:
{
"message_id": 160,
"message": "Venus is in the west",
"first_name": "First",
"last_name": "Last",
"location": {
"lon": -4.8767633,
"lat": 89.7833547
},
"created_at": 1454700182,
"neighborhood": "Townside"
}
I've been trying different ways to create the index.
First:
client.indices.create({
index: 'messages',
type: 'document',
body: {
messages: {
properties: {
message: {
type: 'string',
index: 'not_analyzed'
},
neighborhood: {
type: 'string',
index: 'not_analyzed'
},
first_name: {
type: 'string',
index: 'not_analyzed'
},
last_name: {
type: 'string',
index: 'not_analyzed'
},
created_at: {
type: 'integer',
index: 'not_analyzed'
},
location: {
type: 'geo_point',
lat_lon: true
}
}
}
},
}
);
This allows me to do fuzzy text searches and greater than queries, but doesn't recognize the geo_point. So I tried this:
client.indices.create({
index: 'messages',
type: 'document',
"mappings": {
"messages": {
"properties": {
"message": {
"type": "string",
"index": "not_analyzed"
},
"neighborhood": {
"type": "string",
"index": "not_analyzed"
},
"first_name": {
"type": "string",
"index": "not_analyzed"
},
"last_name": {
"type": "string",
"index": "not_analyzed"
},
"created_at": {
"type": "integer",
"index": "not_analyzed"
},
"location": {
"type": "geo_point",
"lat_lon": true,
"index": "not_analyzed"
}
}
}
}
});
This does recognize the geo_point, but none of the other things work.
Here is the query I've been using for the non geo fields:
query = {
query: {
filtered: {
query: {
multi_match: {
query: message,
fields: ['message', 'neighborhood', 'first_name', 'last_name'],
"fuzziness": "AUTO",
"prefix_length": 2
}
},
filter: {
bool: {
must: {
range: {
"created_at": {
"gte": min_ts
}
}
}
}
}
}
}
};
I've been so turned around on this, just trying to allow text and geo search on the same collection of documents, that I need at least another set of eyes.
Appreciate any help!
How can i bind my child data in one column?
I want to write "Technology,Economy,Life" in same column and same row. But i think i need to loop in "Category". How can i do this, any idea?
My Data:
{
"ParentId": "00000000-0000-0000-0000-000000000000",
"Title": null,
"UserGroupModel": null,
"EntityAccessData": [
{
"EntityTitle": "User",
"Access": {
"Id": "59d0c6f7-8f93-497a-854d-bdd4a42ade94",
"Title": "Can Delete"
},
"Category": [
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Technology"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Economy"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Life"
}
],
"HasAccess": true
},
{
"EntityTitle": "UserGroup",
"Access": {
"Id": "7c65be44-11b0-4cf4-9104-0ad999e7e280",
"Title": "Can Edit"
},
"Category": [
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Technology"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Economy"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Life"
}
],
"HasAccess": true
}
]
}
My Script:
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/getData" },
schema: {
data: "EntityAccessData"
},
group: [{
field: "EntityTitle"
}],
},
columns: [
{
field: "Access.Id",
title: "ID"
},
{
field: "Access.Title",
title: "Access title"
},
{
field: "HasAccess",
title: "has access"
},
{
field: "Category.Title", // ***wrong***
title: "Category"
},
]
});
Define the schema as follow:
schema: {
data : "EntityAccessData",
model: {
CategoryTitle: function () {
var category = [];
$.each(this.Category, function(idx, elem) {
category.push(elem.Title);
});
return category.join(",");
}
}
},
Where I add an additional field CategoryTitle that is the result of joining the Title of the Category array and then define the column as:
{
field: "CategoryTitle()",
title: "Category"
}