Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

130
Views
Check if array undefined in React component

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

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Check out optional chaining.

link.dataInfo1param1?.length > 0
about 4 years ago · Juan Pablo Isaza Report

0

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>
about 4 years ago · Juan Pablo Isaza Report

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!