Find function in React.JS

Question

I am receiving a props data is look like

 data: [
    {
        rowNumber: 1,
        specification: null,
        validationMessage: [
            {
                isExists: true,
                errors: [
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "ERR: Length value is not in correct  "
                    },
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "Height Unit is not in correct  "
                    },
                ]
            }
        ]
    },
    {
        rowNumber: 2,
        specification: null,
        validationMessage: [
            {
                isExists: false,
                errors: []
            }
        ]
    },
]

In my render I have a button and I am trying to disable/ enable that button based on my errorMessage. If my eoorMessage contains a word "ERR:" I will disable the button otherwise it will be enabled. Note: My errorMessage may be empty or may or may not have the word "Err:" word. If "ERR:" word exist any of my errorMessage I have to disable the button

I have tried this but it says x is not defined. How can I overcome this?

render() {

 const hasError = this.props.data ? this.props.data.find((x) => x.validationMessage.erros.find(z => z.errorMessage.indexof("ERR:"))) : ''
    return (
    <div>
        {(this.props.data) ?
            <div>

                (hasError) ?
                <Button variant="contained" className={classes.button} onClick={this.handleSave}>Continue</Button>
                :
                <Button variant="contained" disabled={true} className={classes.button} onClick={this.handleSave}>Continue</Button>

<Button variant="contained" className={classes.button} onClick={this.handleCancle}> Cancel</Button>
                </div>
                : ''}
        </div>
    );

Maheer Ali · Accepted Answer · 2019-03-10 15:41:48Z

There are three problems in you code.

You are using indexOf() which will return -1 if no element is found and its a trucy value. You should use includes()
You are using find() on x.validationMessage.erros. First add the missing r in erros. Secondly. You need to use x.validationMessage[0].errors because validationMessage is an array.
You are using find() on data which will return first occurrence if you want all disabled button you should use filter() otherwise find() is fine.

You question is bit unclear to me. I assumed to want to get all the items in which there is "ERR:".
If you want to check that if any of them contain err or not use .some()

let data = [
    {
        rowNumber: 1,
        specification: null,
        validationMessage: [
            {
                isExists: true,
                errors: [
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "ERR: Length value is not in correct  "
                    },
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "Height Unit is not in correct  "
                    },
                ]
            }
        ]
    },
    {
        rowNumber: 2,
        specification: null,
        validationMessage: [
            {
                isExists: false,
                errors: []
            }
        ]
    },
]


let newarr = data.filter(x=>x.validationMessage[0].errors.find(a=>a.errorMessage.includes('ERR:')))

let isError = data.some(x=>x.validationMessage[0].errors.find(a=>a.errorMessage.includes('ERR:')))

console.log(isError)

console.log(newarr)

Ponleu · Accepted Answer · 2019-03-10 15:27:26Z

0

Firstly, you need to fix the typo error like validationMessage.erros and .indexof. Base on you data, `` should be validationMessage.errors, and .indexof should be .indexOf.

Secondly, you need to understand the indexOf. While your data errorMessage: "ERR: ... the expression z.errorMessage.indexOf("ERR:")) will return 0 which is evaluated to false in boolean.

To Fix this, you need to update it to z.errorMessage.indexOf("ERR:") >=0 so that the hasError variable shall be:


const hasError = this.props.data ? this.props.data.find((x) => x.validationMessage.erros.find(z => z.errorMessage.indexof("ERR:") >= 0 )) : ''

answered Mar 10, 2019 at 15:27

Ponleu

1,63817 silver badges30 bronze badges

Collectives™ on Stack Overflow

Find function in React.JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related