Question 237452 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Accessing nested object properties

I have an object which comes from FieldErrors react-hook-form, however, I am not sure how to access the object in order to retrieve the message property. The object shown in the image below comes from react-hook FieldErrors where I added the following console statement:

console.log('this1: ', errorProps)

enter image description here

I am not sure how to access this errorProps message property. FieldErrors has message, type, root, ref and types associated with it however all of them return back undefined for example, console.log('this1: ', errorProps?.message) returns back undefined. How can I access the message property shown in the image?

<Box display="flex" flexDirection="column" >
  {Object.entries(errors).map(([fieldId, errorProps]) => (
    <Box display="flex" >
      {console.log('this1: ', errorProps)}
      <Typography type="negative">{`${errorProps?.message || errorProps?.root?.message}`}</Typography>
    </Box>
  ))}
</Box>
Tags:

3

Answers


  1. 0 
    [] implies array
{} implies object
0: is the index of the object in the array
you have it opened, so you see the values which is also an object
M13814-m14170 is a key
: { type: required, message... } is the final object you want.

errorProps[0]['M13814-M14170']['message'] is the value you want.

[0,1,2] indexes of an array
[{},{},{}] 3 objects at index 0, 1 & 2.

Your example has only one object.
[{}]

And within that object you have this:
[{ "M13814-M14170": { type: 'required', message: '... }]
    Login or Signup to reply.
  2. 0

    As @deceze already mentioned in his comment: in order to extract the error message from each of the error-objects you might find in your errorProps array you could do the following:

    const errorProps=[{"M13814-M14170": { type: "required", message: "this is the error message" }},
                  {"M15773-M00815": { type: "optional", message: "yet another error message" }}];

const msg=errorProps.map(err=>{
  let [[k,v]]=Object.entries(err);
  return `${k}: ${v.message}`; }).join("n");
console.log(msg);
    Login or Signup to reply.
  3. 0

    The provided code snippet appears to be written in JSX, likely within a React component. It iterates through the entries of an errors object, presumably containing error information related to form fields. For each entry, it attempts to render an error message using the Typography component. However, there is a potential issue with using console.log within JSX, as JSX is primarily intended for rendering components.

    <Box display="flex" flexDirection="column">
  {Object.entries(errors).map(([fieldId, errorProps]) => (
    <Box key={fieldId} display="flex" flexDirection="column"> {/* Add a unique "key" prop */}
      <Typography variant="body1" color="error">
        {errorProps?.message || (errorProps?.root && errorProps.root.message)}
      </Typography>
    </Box>
  ))}
</Box>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search