I have been trying to submit my edited story and trying to clear the story by using a clear function but when i click on submit button after editing the story and when i click on a clear button to clear it throws me this error .
I am attaching an image of my errors and my complete updated code for reference.
You misspelled the function name. Look in the App component and compare that to what you have in the Form component.
@lasjorg Thanks for letting me know.
@lasjorg I am facing this issue after resolving .
1 Like
You need to push your code so we can see the updates.
My best guess would be you didnât fix the function name in the component props so you are referencing a function that doesnât exist in the component.
@lasjorg I have updated my code and now my clear function is working fine but my submit button in an editing option is not working yet neither it is throwing any error. I have pushed my updated code. Please check.
@bappyasif Please have a look into this. Thanks.
what is current situation?! is it still that same âseCurrentIdâ undefined error?
- did you try to call this âsetcurrentIdâ from âsubmitâ function to see if same thing happens or not?
- is this same function works properly from âPostsâ component?
- try to pass in âupdaterFunctionâ instead of "hook update function"to child components to see if that problem resolves or not
happy coding 
@bappyasif Thank you for your response.
Currently, When I am trying to submit my editing story, itâs not working and itâs not showing any error.
Update :
I have resolved the âsetCurrentIdâ error.
- elaborate on this, how is this not working, thanks
- well done
@bappyasif When I try to submit my edited story, itâs not displaying the edited content and only shows the old one.
I am attaching a picture of my issue for reference:
Hope it makes sense to you.
- are you using any âuseEffectâ hooks to ârenderâ that data on page?! if so then you might wanna look into that, if not then please share that âcodeâ which handles this functionality, thanks
happy coding
@bappyasif Here is my code which handles this functionality.
import React,{useEffect, useState} from 'react'
import useStyles from './styles';
import { TextField, Button, Typography,Paper } from '@material-ui/core';
import FileBase from 'react-file-base64';
//import { DeleteButton } from "@refinedev/mui";
//import { clear } from 'console';
import {useDispatch} from 'react-redux';
import { createPost ,updatePost} from '../../actions/posts.js';
//import { updatePost } from '../../../../server/controllers/posts';
import { useSelector } from 'react-redux';
const Form =({currentId, setCurrentId}) =>{
const classes = useStyles();
const [postData, setPostData] = useState({ creator: '', title: '', message: '', tags: '', selectedFile: '' });
const post = useSelector((state) => (currentId ? state.posts.find((message) => message._id === currentId) : null));
//const post = useSelector((state)=> currentId ? state.posts.find((p)=> p._id === currentId) :null);
const dispatch = useDispatch();
useEffect(()=> {
if(post) setPostData(post);
},[post]);
const handleSubmit =(e) =>{
e.preventDefault();
if(currentId){
dispatch(updatePost(currentId, postData));
//clear();
} else{
dispatch(createPost(postData));
//clear();
}
clear();
}
const clear =()=>{
setCurrentId(null);
setPostData({ creator: '', title: '', message: '', tags: '', selectedFile: '' });
}
return (
<Paper className={classes.paper}>
<form autoComplete='off' noValidate className={`${classes.root}${classes.form}`} onSubmit={handleSubmit}>
<Typography variant='h6'> {currentId ? `Editing "${post.title}"` : 'Creating a Memory'}</Typography>
<TextField name="creator" variant="outlined" label="Creator" fullWidth value={postData.creator} onChange={(e) => setPostData({ ...postData, creator: e.target.value })} />
<TextField name="title" variant="outlined" label="Title" fullWidth value={postData.title} onChange={(e) => setPostData({ ...postData, title: e.target.value })} />
<TextField name="message" variant="outlined" label="Message" fullWidth multiline rows={4} value={postData.message} onChange={(e) => setPostData({ ...postData, message: e.target.value })} />
<TextField name="tags" variant="outlined" label="Tags (coma separated)" fullWidth value={postData.tags} onChange={(e) => setPostData({ ...postData, tags: e.target.value.split(',') })} />
<div className={classes.fileInput}>
<FileBase type="file"
multiple={false}
onDone={({ base64 }) => setPostData({ ...postData, selectedFile: base64 })}
/>
<Button className={classes.buttonSubmit} variant="contained" color="primary" size="large" type="submit" fullWidth>Submit</Button>
<Button variant="contained" color="secondary" size="small" onClick={clear} fullWidth>Clear</Button>
</div>
</form>
</Paper>
)
}
export default Form;
- as i said, what value of âpostâ do you get when you are updating âsetPostDataâ
- does it even getting called when âsubmittingâ your edit?
- i suppose its getting served from âcached valueâ
- consider looking into their docs and see if that helps
happy coding
@bappyasif
I have tried to debug my code but unfortunately, I did not get my desired result.
Can you please help me out with this?
im trying to help you find that solution did you look at those aforementioned points? if so what have you found and tried debugging, please consider sharing
happy coding
-
Yes, I have tried those points and try to call setPostData when submitting my edited story and still my issue has not been resolved.
-
I also look into the documentation but was unable to fix my bug yet
- what value of âpostâ do you get when you are submitting it?
- dont be discouraged its part of learning to overcome problems look into other blogs, related docs
- As I told you before, I am not getting any value of âPostâ, when I am submitting it.
- You can also check it by running it locally at your end.
- then look into your usecase of âuseSelectorâ
happy coding