I'm trying to update state using handleChangeProps method, but some how finally the fields.fileName is set as empty string instead of actual value. I'm using material-ui DropZone for file and for name TextField. The addNsmFile is called when onSubmit is called. The remaining fields: name, fileData are not empty and the actual value is set and I can get them in addNsmFile function. Can you help me to figure out why fields.fileName is set as empty finally?
const [fields, setFields] = useState({
name : '',
fileName: '',
fileData: ''
})
const handleChangeProps = (name, value) => {
if (name === 'name' ) {
if (validator.isEmpty(value.trim())) {
setNameError('Enter NSM Name')
} else if (value.trim().length > 512) {
setNameError('The maximum length for NSM name is 512. Please re-enter.')
} else {
setNameError('')
}
}
if (name === 'fileData') {
console.log('fileData', value)
if (validator.isEmpty(value.trim())) {
setFileuploadError('Drag and drop or browse nsm file')
} else {
setFileuploadError('')
}
}
setFields({ ...fields, [name]: value })
}
const addNsmFile = () =>{
let nsmForm = new FormData()
nsmForm.append('name', fields.name)
nsmForm.append('fileName', fields.fileName)
nsmForm.append('fileData', fields.fileData)
NSMDataService.addFile(nsmForm).then((response)=>{
if (response.data.substring(0, 1) === '0') {
const results = JSON.parse(response.data.substring(2))
addNotification('success', 'NSM file is being added successfully.')
//props.onRowSelectionChange(results.addFile)
props.setOpenDialog(false)
props.setRefresh(results.addFile[0].id)
} else if (response.data.substring(0, 1) === '1') {
addNotification('error', response.data.substring(2))
props.setOpenDialog(false)
}
}).catch((error)=>{
console.log(error)
})
}
<DropzoneArea
acceptedFiles={[".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values"]}
maxFileSize={1000000000} //1GB
dropzoneText='Drag and drop a NSM file here or click to add'
showFileNames= {true}
showPreviews={false}
useChipsForPreview={true}
showAlerts={true}
filesLimit={1}
classes={{root:classes.rootDropzoneArea, icon: classes.iconDropzoneArea, text: classes.textDropzoneArea}}
onChange={(files) => {
files.forEach((file) => {
console.log(file)
handleChangeProps('fileName', file.name)
let reader = new FileReader()
reader.onload = function(event) {
let contents = event.target.result
handleChangeProps('fileData', contents)
console.log("File contents: " + contents)
}
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code)
}
reader.readAsText(file);
})
}}
onDelete={(file)=> {
handleChangeProps('fileData', '')
}
}
/>
I think the problem might be with your setFields() update in handleChangeProps. Try to do like this:
setFields(prevState => ({
...prevState,
[name]: value,
}))
Related
I am using functions that change a value in a nested object in the state :
an I am calling those functions in a button , they are executed when I click on that button , but one of those functions doesn't make changes to the state
This is the state :
state = {
data: {
attributesLength: this.props.product.attributes.length,
modalMessage: "",
isOpen: false,
},
};
and these are the functions :
addToCart = (id) => {
let data = { ...this.state.data };
if (Object.keys(this.state).length === 1) {
data.modalMessage = "Please, select product attributes";
this.setState({ data});
return;
}
if (
Object.keys(this.state).length - 1 ===
this.state.data.attributesLength
) {
const attributes = Object.entries(this.state).filter(
([key, value]) => key !== "data"
);
if (this.props.cartProducts.length === 0) {
this.props.addItem({
id: id,
quantity: 1,
attributes: Object.fromEntries(attributes),
});
data.modalMessage = "Added to cart !";
this.setState({ data });
return;
}
const product = this.props.cartProducts.filter((item) => item.id === id);
if (product.length === 0) {
this.props.addItem({
id: id,
quantity: 1,
attributes: Object.fromEntries(attributes),
});
data.modalMessage = "Added to cart !";
this.setState({ data });
return;
}
if (product.length !== 0) {
this.props.changeQuantity({ id: id, case: "increase" });
data.modalMessage = "Quantity increased !";
this.setState({ data });
return;
}
if (this.state.data.attributesLength === 0) {
this.props.addItem({
id: id,
quantity: 1,
attributes: Object.fromEntries(attributes),
});
data.modalMessage = "Added to cart !";
this.setState({ data });
return;
}
} else {
data.modalMessage = 'please, select "ALL" product attributes!';
this.setState({ data });
}
};
changeModalBoolean = () => {
let data = { ...this.state.data };
data.isOpen = !data.isOpen;
this.setState({ data });
};
and this is where I am calling functions :
<button
className={product.inStock ? null : "disabled"}
disabled={product.inStock ? false : true}
onClick={() => {
this.addToCart(product.id);
this.changeModalBoolean();
}}
>
{product.inStock ? "add to cart" : "out of stock"}
</button>
NOTE
changeModalBoolean function works and change state isOpen value,
this.addToCart(product.id);
this.changeModalBoolean();
This code run synchronously one after the other. In every function, you create a copy of previous state let data = { ...this.state.data };
so the this.changeModalBoolean(); just replace state which you set in this.addToCart(product.id); to fix this problem, use this.setState((state) => /*modify state*/)
changeModalBoolean = () => {
this.setState((state) => {
let data = { ...state.data };
data.isOpen = !data.isOpen;
return { data };
})
};
or modify the same object in both functions
I have 2 Components: Community.js and Edit.js
I call to Edit from Community below:
<DetailModal
DetailModal={Detail}
errors={this.state.errors}
uploadFile={this.props.uploadFileActions.uploadFile}
onSave={this.save}
onChange={this.onChange}
mode={this.state.mode}
data={this.state.details}
isOpen={this.state.modalIsOpen}
closeModal={this.closeModal}
editable={isHasEditPermisson}
/>
At Community, I have a function onchange() below:
onChange = (field, data) => {
let value = null;
if (data) {
value = data
}
this.setState(state => ({
details: {
...state.details,
[field]: value
},
errors: {
...state.errors,
[field]: undefined
}
}));
// }
}
At Edit, I have a function which called to select image/video file:
selectFile = (file) => {
if (file && file.target.files.length > 0) {
const checkType = file.target.files[0].type.split('/')[0]
const extendType = file.target.files[0].type.split('/')[1]
const fileArr = [];
// if (checkType === "video") {
// console.log('this.getDuration(file)', this.getDuration(file))
// if (this.getDuration(file) > 60) {
// alert("stop");
// return;
// }
// }
// this.props.uploadFile(file.target.files[0], (res) => {
// this.props.onChange('ResourceUrl', `${this.props.data.ResourceUrl ? `${this.props.data.ResourceUrl};` : ''}${res.data.Data}`);
// });
fileArr.push({
file: file.target.files[0],
urlFile: URL.createObjectURL(file.target.files[0]),
});
this.props.onChange('ResourceUrl', `${this.props.data.ResourceUrl ? `${this.props.data.ResourceUrl};` : ''}${fileArr[0].urlFile}`);
this.props.onChange('ResourceFile', this.props.data.ResourceFile ? this.props.data.ResourceFile : fileArr[0].file);
if (checkType === "image") {
this.setState({
fileType: "image/*",
extend: extendType
})
} else {
this.setState({
fileType: "video/*",
countVideo: 1,
extend: extendType
})
}
// file.target.value = '';
}
}
This is Init state in Community:
constructor(props) {
super(props);
this.escFunction = this.escFunction.bind(this);
this.state = {
modalIsOpen: false,
mode: 'add',
details: {},
errors: {},
defaultRole: constants.CollaboratorRole.default,
permanentRole: constants.CollaboratorRole.permanent,
isOpenDeleteConfirm: false
};
}
Here, I call to onchange() in Community to set value for 2 field: ResourceUrl, ResourceFile
But I have an issue when set value for ResourceFile. When I choose second file then I still get value of first file.
I don't know how to set the value of the second file into ResourceFile, which means that I expect that ResourceFile is an array containing the information of the two files I just selected.
I am using Draftjs and Draftjs mention plugin. When there is a suggestion for mention name it renders fine but if suggestion doesn't exist and I use # followed by random text it crashes. Can anyone help me out with this. Will be very grateful. Thank you.
this.mentionMembersPlugin = createMentionPlugin({
entityMutability: "IMMUTABLE",
positionSuggestions,
mentionTrigger: "#",
mentionPrefix: "",
supportWhitespace: true
});
onChangeEditor = editorState => {
this.setState({ emptyField: false });
this.setState({ editorState });
};
onSearchMemberChange = ({ value }) => {
this.setState({
suggestionMembers: defaultSuggestionsFilter(
value,
this.state.mentionMembers
)
});
};
handleKeyCommand(command: string): DraftHandleValue {
if (command === "save_teamsync") {
// Perform a request to save your contents, set
// a new `editorState`, etc.
this.add_taskComment();
return "handled";
}
return "not-handled";
}
add_taskComment() {
let newData = convertToRaw(this.state.editorState.getCurrentContent());
let checkText = newData.blocks[0].text;
this.setState({ clicked: true });
var r = JSON.stringify(
convertToRaw(this.state.editorState.getCurrentContent())
);
//e.preventDefault();
if (checkText.trim().length !== 0) {
if (this.isValid(r)) {
var data = {};
data.text = r;
data.mentionMembers = r.entityMap;
this.props
.addTaskComment(this.props.task._id, this.showTags, data)
.then(res => {
if (res.data.success) {
const editorState = EditorState.push(
this.state.editorState,
ContentState.createFromText("")
);
this.setState({
editorState: EditorState.moveFocusToEnd(editorState)
});
//this.setState({ editorState: EditorState.moveFocusToStart(EditorState.createEmpty()), clicked:false });
this.lastComment.scrollIntoView({ behavior: "smooth" });
}
});
}
} else {
this.setState({ isCommentEmpty: true });
}
}
<Editor
blockStyleFn={"myBlockStyleFn"}
editorState={this.state.editorState}
onChange={this.onChangeEditor}
plugins={this.plugins}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.myKeyBindingFn}
placeholder="Write a comment"
ref={element => {
this.editor = element;
}}
/>
<MentionMembersSuggestions
onSearchChange={this.onSearchMemberChange}
suggestions={this.state.suggestionMembers}
/>
This are all the code that are being used to render the comments.
This is the error I am getting "Unhandled Rejection (TypeError): this.props.getEditorState is not a function".
I'm trying to update the input value on a form. The input value I need to update sits within an array of objects within another array of objects. I'm trying to update the address within emails (see below).
const userProfiles = [{
firstName: 'John',
emails: [{ address: 'john#gmail.com' }]
}]
Each keystroke updates the field and sate of the userProfiles, however, the input field disengages. So I have to keep reselecting the input field. What am I missing here?
handleInputChange = (userProfileId, index) => (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
const userProfiles = this.state.userProfiles.map((userProfile) => {
if (userProfile._id === userProfileId) {
if (name === 'email') {
const emails = userProfile.emails.map((email, idx) => {
if (idx === index) {
return {
...email,
address: value,
};
}
return {
...email,
};
});
return {
...userProfile,
emails,
};
}
return {
...userProfile,
[name]: value,
};
}
return {
...userProfile,
};
});
this.setState({
userProfiles,
});
}
handleInputChange = (userProfileId, index) => (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
let { userProfiles } = this.state;
userProfiles.map((eachProfile) => {
let { emails } = userProfiles.emails;
if (userProfile._id === userProfileId) {
if(name === 'email') {
emails.map((emails, idx) => {
if (idx === index) {
emails = value;
}
})
}
}
});
this.setState({
...this.state,
userProfiles
})
}
Can you try this one?
I don't think this is difficult, I just can't figure out the best way to do it. This function is creating an array, from a group of checkboxes. I then want to break up the array and create an array of objects, because each object can have corresponding data. How do I filter out existing rolesInterestedIn.roleType.
handleTypeOfWorkSelection(event) {
const newSelection = event.target.value;
let newSelectionArray;
if(this.state.typeOfWork.indexOf(newSelection) > -1) {
newSelectionArray = this.state.typeOfWork.filter(s => s !== newSelection)
} else {
newSelectionArray = [...this.state.typeOfWork, newSelection];
}
this.setState({ typeOfWork: newSelectionArray }, function() {
this.state.typeOfWork.map((type) => {
this.setState({
rolesInterestedIn: this.state.rolesInterestedIn.concat([
{
roleType: type,
}
])
}, function() {
console.log(this.state.rolesInterestedIn);
});
})
});
}
UDPATE
rolesInterestedIn: [
{
roleType: '',
experienceYears: ''
}
],
Because each time you do setState you are concatenating the new value to the prev one in rolesInterestedIn array. Add new value only when you are adding new item, otherwise remove the object from both the state variable typeOfWork and rolesInterestedIn.
Try this:
handleTypeOfWorkSelection(event) {
const newSelection = event.target.value;
let newSelectionArray, rolesInterestedIn = this.state.rolesInterestedIn.slice(0);
if(this.state.typeOfWork.indexOf(newSelection) > -1) {
newSelectionArray = this.state.typeOfWork.filter(s => s !== newSelection);
rolesInterestedIn = rolesInterestedIn.filter(s => s.roleType !== newSelection)
} else {
newSelectionArray = [...this.state.typeOfWork, newSelection];
rolesInterestedIn = newSelectionArray.map((workType) => {
return {
roleType: workType,
experienceYears: '',
}
});
}
this.setState({
typeOfWork: newSelectionArray,
rolesInterestedIn: rolesInterestedIn
});
}
Suggestion: Don't use multiple setState within a function, do all the calculation then use setState once to update all the values in the last.