In a table of records, there are certain input text fields and date field which can be changed. When input text is changed date field gets undefined and for date field its vice-versa. My intention is to pass values of input text as well as date values, but, gets undefined in the console. Please refer to code below
const handleChange = (data) => {
// here text and date values are extracted
const { id, textVal, dateVal } = data;
setDataNew((prevInfo) => {
const newList = [...prevInfo];
const index = newList.findIndex((datum) => datum.id === id);
if (index !== -1) {
// getting undefined here
newList[index] = { id, textVal, dateVal };
} else {
newList.push({ id, textVal, dateVal });
}
return [...newList];
});
};
I'm able to process data only when input text is changed, but, on date field change input data is undefined... similarly it happens for date field as well.
Please refer to codesandbox link for better clarity --> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Table.js:968-1155
You will have to pass other value from the Grid component in the callback of date change and name change.
Related
In a Grid, records are fetched from API and displayed. It also has certain input fields, with text and date field. While inputting data for date its getting displayed two times, as seen in the console, the data from JSON is as est: 10/20/2022 but I want to display it as Establish: 10/20/2022. What modifications could be made in the code? Please refer to code below.
//Here 'allData' is an array of data from JSON
const tempData = allData;
tempData.map((x) => {
if (data.id === x.id) {
x.name = data.textVal;
}
// Here I'm trying to assign new key 'Establish' to old key 'est'
if (data.id === x.id) {
x["est"] = x["Establish"];
x.Establish = data.dateVal;
}
});
Please refer to codesandbox link --> https://codesandbox.io/s/jovial-aryabhata-95o2sy?file=/src/Table.js
Give this a whirl
if(data.id === x.id) {
delete Object.assign(x, {['Establish']: x['est'] })['est'];
}
I think your way works but if you want another way so you can create a new property by using:
Object.defineProperty(x, "Establish", Object.getOwnPropertyDescriptor(x, "est"));
In a React project, I've certain number of records which also contain input fields like Date and Text components in a Grid. I'm processing the date and text values in save function. All the records are fetched from JSON data, while saving date values its assigned to new key object but new one isn't getting updated with the old one. I have seen many similar posts but, none useful. Please refer to the code below:
Following is the function where I'm extracting both text and date values
const updateGrid = (data) => {
if (Array.isArray(allData) && allData?.length > 0) {
const tempData = allData;
tempData.map(x=> {
if(data.id === x.id) {
x.name = data.textVal
}
// Here I'm assigning the 'Establish' value with 'est'
if(data.id === x.id) {
x['est'] = x['Establish']
x.Establish = data.dateVal
}
})
setDataAll(tempData)
}
console.log('tempdataNew', dataAll)
}
As you can see from above picture, we have two keys, 'est' and 'Establish', but, I need only 'Establish', also getting undefined on 'name' when changed date value and vice-versa. What could be the best optimal solution to tackle this issue?
Please refer to Codesandbox --> https://codesandbox.io/s/jovial-aryabhata-95o2sy?file=/src/Table.js
In a React project, I've certain records of data which are populated in a grid. It also has two input fields one for text and other is date. User can make any changes on text or date field. My concern is that when date value is changed, text data is shown in console along with new date value, but, when text value or date value from other record is changed, the previous record's text value is reset to old value. Please refer to the code below
Below is the code where I'm extracting both text and date values on handlechange
const handleChange = (data) => {
const { id: newId, textVal: franchise, dateVal: dateData } = data;
setDataNew((prevInfo) => {
const newList = [...prevInfo];
const index = newList.findIndex((datum) => datum.newId === newId);
if (index !== -1) {
if (newId !== undefined) {
newList[index].newId = newId;
}
if (franchise !== undefined) {
newList[index].franchise = franchise;
}
if (dateData !== undefined) {
newList[index].dateData = dateData;
}
} else {
newList.push({ newId, franchise, dateData });
}
return [...newList];
});
};
These are the changes
<input type="text" onChange={(e) => textCallback({textVal: e.target.value,id: rowData[0].id,
dateVal: rowData[4] <-- This date value is added in text field
})}/>
<DatePickerNew setRequesterDate={(e) => dateCallback({dateVal: e, id: rowData[0].id,
textVal: rowData[3] <-- This text value is added in date field
})} startDate={colData}
/>
As you can see from above code, new keys have been added to get the values of respective fields. It works for date field but, not for text field. What could be the best optimal solution?
Please refer to codesandbox link --> https://codesandbox.io/s/keen-dubinsky-7z53vc?file=/src/Grid.js
Do observe the console output to see the changes
React formik and react select package are I am using . I created on form that contains user can create new and Edit also working in same form. I have an one multi select field that field values are in array I want to change to string send to server on onSubmit. And also on update I want to get the string value convert array set to select field. I try it but cant found solution .please give me any ideas It helpful for me
codeSandbox:https://codesandbox.io/s/multipleselect-formik-3eqxp?file=/src/RegisterForm.js
Thanks for help
After getting the field value change the array to string on before submit. we want bind the change string value on field. It will be working fine for me.
Code Sandbox link :https://codesandbox.io/s/multipleselect-formik-3eqxp?file=/src/RegisterForm.js:657-844
function create(fields) {
console.log(fields);
const jobs = [];
fields.job.map((ele) => jobs.push(ele.value));
fields.job = jobs.toString();
console.log(fields);
}
i am not sure if this what you are looking for, but i did
function create(fields) {
fields.job = JSON.stringify(fields.job)
console.log(fields);
}
or
function create(fields) {
const jobs = [];
fields.job= fields.job.map((ele) => jobs.push(ele.value));
console.log(fields);
}
instead of
function create(fields) {
console.log(fields);
const jobs = [];
fields.job.map((ele) => jobs.push(ele.value));
const job = ("text => ", jobs.toString());
console.log(job);
console.log(fields);
}
I think you want to get the value from the array where the result should be
{name: "111", fatherName: "222", job: ["enginner", "painter"] }
function create(fields) {
const amendedFields = {
...fields,
job: fields.job.map((ele) => ele.value) // extract value from object, ["enginner", "painter"]
}; // not mutating the current fields object, copy it and mutate the new one.
console.log("old", fields);
console.log("new", amendedFields);
}
Iām new to Vue.
I would like to know if it is possible to update the input value after running a custom validation in Vuelidate. I have an input field for postcode. I want to return the postcode with the correct format in case the user forgets to put a whitespace, and update the input field with the correct value, e.g.
user input = XXXXXX
returned output = XXX XXX
Sample code
export default {
...
validations: {
postcode: {
required,
maxLength: maxLength(10),
validatePostcode: (value) => {
const result = customValidators.validatePostcode(value);
if (result !== false) {
if (result !== value) {
// UPDATE THE INPUT VALUE HERE WITH THE CORRECT POSTCODE FORMAT
}
return true;
}
return false;
}
}
}
...
}
I changed the arrow function declaration to a function shorthand declaration. I'm now able to access the component object and change the input field value via the Vuelidate model. Thanks to this: https://github.com/vuelidate/vuelidate/issues/237 š