How to render grand child and remove JSON object

Question

I have a Json arry like

    Array(3)
0: {validationMessage: {…}, id: -2147482623, partTypeId: null, partType: null, partCategoryId: 5, …}
1: {validationMessage: {…}, id: -2147482622, partTypeId: null, partType: null, partCategoryId: 2, …}
2: {validationMessage: {…}, id: -2147482621, partTypeId: null, partType: null, partCategoryId: 5, …}

from insde it looks like this

Array(3)
0: {validationMessage: {…}, id: -2147482623, partTypeId: null, partType: null, partCategoryId: 5, …}
1:
repairFacility: null
resourcePredictions: null
revision: null
specification: null
validationMessage:
errors: Array(1)
0:
attemptedValue: "147-6268-5715"
customState: null
errorCode: "PredicateValidator"
errorMessage: "This is warning "

[Solved]My first question how can I render my validation errorMessage: which is under each of my array element ->validationMessage>errors[0]->errorMessage so far I can render other elements and here is my code. but for error message it shows x is not defined

    <TableBody>
    {this.props.data ? this.props.data.map((item, i) => (

    <TableRow key={i}>
 {
    x = function myFunction(item) {
        if (item.validationMessage.erros[0].length > 0) {
            return item.validationMessage.erros[0].errorMessage
        } else {
            return ''
        }
    }
}
    <TableCell align="right">{x}</TableCell>   ////Want to render ERRORMESSAGE                                                                                                                        
    <TableCell align="right">{item.partNumber}</TableCell>
    <TableCell align="right">{item.description}</TableCell>
    <TableCell align="right">{item.partCategoryId}</TableCell>
    <TableCell align="right">{item.oemPartNumber}</TableCell>
    </TableRow>
    )) : ''}
    </TableBody>

My second question is how can I remove "validationMessage:" from my JSON? here is my try

removemsg() {
    const { data } = this.props
    let out = null;
    if (data) {
      out =  data.delete("validationMessage");
    }
}

Answer 1

First question

To render your error only if the length of your array is different to 0 , you could use conditional rendering.

A length of 0 will not return anything using the && operator, as it is falsy :

<TableBody>
{this.props.data && this.props.data.map((item, i) => (
    <TableRow key={i}>
    <TableCell align="right">{item.validationMessage.erros[0].length && item.validationMessage.erros[0].errorMessage}</TableCell>
    <TableCell align="right">{item.partNumber}</TableCell>
    <TableCell align="right">{item.description}</TableCell>
    <TableCell align="right">{item.partCategoryId}</TableCell>
    <TableCell align="right">{item.oemPartNumber}</TableCell>
    </TableRow>
))}
</TableBody>

Second question

To extract only a given variable out of a JSON, you can use deconstruction and then use the deconstructing operator ... to get everything lefy of your object in a variable, here named newData :

removemsg() {
    const { data = {} } = this.props
    const { validationMessage, ...newData } = data

    console.log(newData)
}

However, you cannot directly modify your props.

Answer 2

For your first question you can simply put an if statement (using the ternary operator) inside the {} brackets where you currently have the x . I think this should suffice. I've also taken the liberty to return the stuff within your map function.

<TableBody>
{
    (this.props.data)
        ? this.props.data.map((item, i) => (
            return (
                <TableRow key={i}>
                    <TableCell align="right">
                    {
                        (item.validationMessage.errors[0].length > 0)
                            ? item.validationMessage.errors[0].errorMessage
                            : ''
                    }
                    </TableCell>                                                                                                                       
                    <TableCell align="right">{item.partNumber}</TableCell>
                    <TableCell align="right">{item.description}</TableCell>
                    <TableCell align="right">{item.partCategoryId}</TableCell>
                    <TableCell align="right">{item.oemPartNumber}</TableCell>
                </TableRow>
            );
        ))
        : ''
}