I have a code in React component that renders match name. But sometimes current match have emty object and I can't pass this issue. Component code:

import React from 'react'
import {Link} from 'react-router-dom'

    export const MatchList  = ({ links }) => {
      if (!links.length) {
        return <p className="center">Матчей пока нет</p>
      }
    
      return (
        <table>
          <thead>
          <tr><th><a href="/add">Добавить ссылку</a></th></tr>
          <tr>
            <th>link</th>
            <th>Открыть</th>
          </tr>
          </thead>
    
          <tbody>
          { links.map((link, index) => {
            return (
              link.dataInfo1param1.length > 0 ?
              <tr key={link._id}>
                <td>{link.url}</td>
                <td>
                  Name: { link.dataInfo1param1[0][0]['odddTitle'] } <Link to={`/match/${link._id}`}>Открыть</Link>
                </td>
              </tr>
              :
              <tr key={link._id}>
                <td>{link.url}</td>
                <td>
                  <Link to={`/match/${link._id}`}>Открыть</Link>
                </td>
              </tr>
            )
          }) }
          </tbody>
        </table>
      )
    }

When link.dataInfo1param1 has an empty value I always get an error

× TypeError: Cannot read properties of undefined (reading 'length')

How I can check that this value do not exist or empty? Thanks

CodePudding user response：

Check out optional chaining.

link.dataInfo1param1?.length > 0

CodePudding user response：

you can use ternary operator for this check as below.

       <td>
          Name: { link.dataInfo1param1?link.dataInfo1param1[0][0]['odddTitle']:null } <Link to={`/match/${link._id}`}>Открыть</Link>
        </td>

CodePudding user response：

the simplest solution would be link.dataInfo1param1 && link.dataInfo1param1.length > 0

CodePudding user response：

before mapping your list you can check if it is empty or not like this:

{
    links && links.map(link, index) => {//your logic}
}

CodePudding user response：

 Array.isArray(link.dataInfo1param1) && link.dataInfo1param1.length > 0 

CodePudding user response：

there is an operator in JS you can use in these situations, optional chaining

use it like this:

link.dataInfo1param1?.length > 0

CodePudding user response：

There are a lot of ways to verify if link.dataInfo1param1 is undefined. The ways I usually use are:

1. Triple operator, in your case would be:

   link.dataInfo1param1 !== undefined && link.dataInfo1param1.length > 0 && ...
   

2. typeof operator:

   typeof link.dataInfo1param1 != 'undefined' && link.dataInfo1param1.length > 0 && ...
   

3. simple check:

   link.dataInfo1param1 && link.dataInfo1param1.length > 0 && ...
   

4. optional chaining operator:

   link.dataInfo1param1?.length > 0 && ...