CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-dom
VijayT
VijayT

Reputation: 27

Getting this error while rendering the page

I do not understand this error.  Is this a syntax error? Is this happening because of the react-dom version?

Throwing error on this block.

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        return this.props.witnesses.find(el => el.account_id === witnessId).account_name;
    }
}

Error is :

Uncaught TypeError: Cannot read property 'account_name' of undefined
at BlockList.__getWitnessName__REACT_HOT_LOADER__ (BlockList.js:212)
at BlockList._this.getWitnessName (BlockList.js:76)
at eval (BlockList.js:321)
at Array.map (<anonymous>)
at BlockList.render (BlockList.js:314)
at finishClassComponent (react-dom.development.js:17160)
at updateClassComponent (react-dom.development.js:17110)
at beginWork (react-dom.development.js:18620)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)

The above error occurred in the <BlockList> component:
in BlockList (created by Connect(BlockList))
in Connect(BlockList) (created by Route)
in Route
in Switch
in div
in Router (created by ConnectedRouter)
in ConnectedRouter
in Provider
in AppContainer

Upvotes: 0

Views: 1139

Answers (4)

mplungjan
mplungjan

Reputation: 178011

You can use Optional chaining

Add a nullish coalescing operator to complete the picture instead of the normal || which will not react to falsy values

return this.props.witnesses.find(el => el.account_id === witnessId)?.account_name ?? "N/A";

It will handle missing witness and missing account_name

Example

const props = {
  witnesses: [
  { account_id: 1, account_name: "Fred"}, 
  { account_id: 2, account_name: "Joe" }, 
  { account_id: 3 }]
};

const getName = witnessId => props.witnesses
   .find(el => el.account_id === witnessId)?.account_name ?? "N/A";

console.log(getName(1))
console.log(getName(2))
console.log(getName(3))
console.log(getName(4))

Upvotes: 1

Edison Sanchez
Edison Sanchez

Reputation: 104

Try to validate first at to get the property, That's happening cause it's not finding any with that validation input. Then find returns undefined, and you can't obtain property from undefined.

For example

this.props.witnesses.find(el => el.account_id === witnessId)?.account_name ?? 'Account Not Found';

Upvotes: 0

Basanta Kc
Basanta Kc

Reputation: 263

if you see the below code the witness var can be undefined if it doesn't find any account_id matching the given witnessId. In that case, the error is being thrown so do this

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        const witness = this.props.witnesses.find(el => el.account_id === witnessId)
        return witness ? witness.account_name : `No witness for given id: ${witnessId}`;
    }
}

Upvotes: 1

Sunil Choudhary
Sunil Choudhary

Reputation: 329

getWitnessName = (witnessId) => {
    if (this.props.witnesses) {
        let foundWitnesses = this.props.witnesses.find(el => el.account_id === witnessId);
        if(foundWitnesses)
             return foundWitnesses.account_name;
        else 
             return 'Not found';
    }
}

Upvotes: 0

Related Questions