React component how to display errors from two different objects

Question

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

Answer 1

Rename the variable

const {error: userError,loading,user} = userDetails
const {error: updateError, success} = userUpdateProfile