así que tengo 2 botones, uno eliminar y editar, solo quiero que el que comentó pueda eliminar y editar su publicación, el botón eliminar funciona pero no probé el de edición porque seguía recibiendo errores, mi el problema es que funcionaba antes, solo el autorizado y el que comentó podían ver la publicación, pero volví a hacer un poco de CSS y ahora sigo recibiendo "No se pueden leer las propiedades de nulo (leyendo '_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>Intente usar el operador de propagación nula cambiando el reducerUser._id por reducerUser?._id.
Puede usar el encadenamiento opcional en su objeto el en cada componente de botón para evitar el error y dentro de los métodos de su tienda validar si el valor es nulo, simplemente ignórelo así:
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>