0

In a react component i want to have access in the error variable from two different destructured objects

import React, {useEffect, useState} from 'react'
import { Link, useParams,  useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { useDispatch,useSelector } from 'react-redux'
import { Row,Col,Image,ListGroup,Form, Button,Card } from 'react-bootstrap'
import Message from '../components/Message'
import Loader from '../components/Loader'
import {getUserDetails, updateUserProfile} from '../actions/userActions' 
import { USER_UPDATE_PROFILE_RESET } from '../constants/userConstants'

function ProfileScreen() {
const [email, setEmail] =useState('')
const [name, setName] =useState('')
const [password, setPassword] =useState('')
const [confirmPassword, setConfirmPassword] =useState('')
const [message, setMessage] =useState('')
const history = useNavigate()
const dispatch  = useDispatch();

const userDetails = useSelector(state=>state.userDetails)
const {error,loading,user} = userDetails

const userLogin = useSelector(state=>state.userLogin)
const {userInfo} = userLogin

const userUpdateProfile = useSelector(state=>state.userUpdateProfile)
const {error, success} = userUpdateProfile

useEffect(
  () => {
    if(!userInfo){
      history('/login')
    }
    else{
        if(!user || !user.name || success){
            dispatch({type:USER_UPDATE_PROFILE_RESET})
            dispatch(getUserDetails('profile'))

        }
        else{
            setName(user.name)
            setEmail(user.email)
        }
    }
  },[dispatch,history,user, userInfo, success])


const submitHandler = (e) => {
  e.preventDefault();
  if(password != confirmPassword){
    setMessage('Password do not match')

  }
  else {
    dispatch(updateUserProfile({
        'id':user._id,
        'name':name,
        'email':email,
        'password':password
    }))
    setMessage('')
  }
  


}



return (
<Row>
    <Col md={3}>
        <h2>User Profile</h2>
        {message && <Message variant='danger'>{message}</Message>}
  {error && <Message variant='danger'>{error}</Message>}
  {loading && <Loader />}
  <Form onSubmit={submitHandler}> 

  <Form.Group controlId='name'>
    <Form.Label>Name</Form.Label>
    <Form.Control required type='name' placeholder="enter name" value={name} onChange={(e)=> setName(e.target.value)}>
    </Form.Control>
  </Form.Group>
  <Form.Group controlId='email'>
    <Form.Label>Email Address</Form.Label>
    <Form.Control required type='email' placeholder="enter email" value={email} onChange={(e)=> setEmail(e.target.value)}>

    </Form.Control>
  </Form.Group>
  <Form.Group controlId='password'>
    <Form.Label>Password</Form.Label>
    <Form.Control  type='password' placeholder="enter password" value={password} onChange={(e)=> setPassword(e.target.value)}>

    </Form.Control>
  </Form.Group>

  <Form.Group controlId='passwordConfirm'>
    <Form.Label>Confirm Password</Form.Label>
    <Form.Control type='password' placeholder="confirm password" value={confirmPassword} onChange={(e)=> setConfirmPassword(e.target.value)}>

    </Form.Control>
  </Form.Group>

  <Button type="submit" variat="primary">Update</Button>
  </Form>
    </Col>
    <Col md={9}>
        <h2>My Orders </h2>
    </Col>
    
    ProfileScreen</Row>
)
}

export default ProfileScreen

1 Answer 1

1

Rename the variable

const {error: userError,loading,user} = userDetails
const {error: updateError, success} = userUpdateProfile
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.