so i have 2 buttons one delete and an edit, i only want the one who commented to be able to delete and edit his post, the delete button is working but i didn't test the edit one because i kept on getting error, My problem is it was working before, only the authorized and the one who commented could view the post, but i went back to do some css and now keep on getting "Cannot read properties of null (reading '_id')"
function PostItem({el}) {
const dispatch = useDispatch()
const history= useHistory()
const [text, setText]=useState("")
const auth = useSelector(state=> state.UserReducer.auth)
const handleSubmit=(e)=>{
e.preventDefault();
dispatch(AddComment(el._id, {text}));
};
useEffect(() => {
// dispatch(Getpost(el._id))
dispatch(current())
}, [])
const reducerUser = useSelector(state => state.UserReducer.user)
return(
<section className="dark">
<div className="container-p">
<article className="newPost">
<div className="post-head">
<h6 className="post-name">{el.name}</h6>
<div className="post-body">
<time dateTime="date-post">
<i className="date-post" /><Moment>"YYYY/MM/DD" </Moment>
</time>
</div>
<div className="post-text" />
<p>{el.text}</p>
{auth && reducerUser._id == el.user &&
<div>
<button onClick={()=>{dispatch(DeletePost(el._id))}}>
Delete Post
</button>
<button onClick={()=>{dispatch(EditPost(el._id))}}>EDIT
</button>
</div>
}
</div>
<form onSubmit={handleSubmit}>
<textarea value={text} onChange={(e)=>setText(e.target.value)} rows="2" cols="100" >
</textarea>
<button className='btn' type="submit" > add comment</button>
<p>
{el.comments.map(el=> el.text && el.text )}
</p>
</form>
</article>
</div></section>Try to use Null Propagation operator changing the reducerUser._id for reducerUser?._id.
You can use Optional chaining in your el object on each button component to prevent the error and inside your store methods validate if the value is null just ignore it like this:
function PostItem({el}) {
const dispatch = useDispatch()
const history= useHistory()
const [text, setText]=useState("")
const auth = useSelector(state=> state.UserReducer.auth)
const handleSubmit=(e)=>{
e.preventDefault();
dispatch(AddComment(el._id, {text}));
};
useEffect(() => {
// dispatch(Getpost(el._id))
dispatch(current())
}, [])
const reducerUser = useSelector(state => state.UserReducer.user)
return(
<section className="dark">
<div className="container-p">
<article className="newPost">
<div className="post-head">
<h6 className="post-name">{el.name}</h6>
<div className="post-body">
<time dateTime="date-post">
<i className="date-post" /><Moment>"YYYY/MM/DD" </Moment>
</time>
</div>
<div className="post-text" />
<p>{el.text}</p>
{auth && reducerUser?._id == el.user &&
<div>
<button onClick={()=>{dispatch(DeletePost(el?._id))}}>
Delete Post
</button>
<button onClick={()=>{dispatch(EditPost(el?._id))}}>EDIT
</button>
</div>
}
</div>
<form onSubmit={handleSubmit}>
<textarea value={text} onChange={(e)=>setText(e.target.value)} rows="2" cols="100" >
</textarea>
<button className='btn' type="submit" > add comment</button>
<p>
{el.comments.map(el=> el.text && el.text )}
</p>
</form>
</article>
</div></section>