CODEWITHSUNDEEP
javascriptreactjs
Tayyab ali
Tayyab ali

Reputation: 41

My code gives "TypeError: Cannot read property 'map' of undefined" in ReactJs

This piece of code giving me type error: "TypeError: Cannot read property 'map' of undefined" I don't understand what is the problem here.

const ShowMainData = ({ name, rating, summary, tags, image }) => {
    return (
        <div>
          <img src={image ? image.original : IMG_PLACEHOLDER} alt="show-cover" />
          <div>
            <div>
              <h1>{name}</h1>
              <div>
                <Star />
                <span>{rating.average || 'N/A'}</span>
              </div>
            </div>
            <div dangerouslySetInnerHTML={{ __html: summary }} />
    
            <div>
              Tags:{' '}
              <div>
                {tags.map((tag, i) => (
                  <span key={i}>{tag}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      );
}

Error Picture

Upvotes: 1

Views: 65

Answers (2)

Daniel Bellmas
Daniel Bellmas

Reputation: 657

I added?. before map:

const ShowMainData = ({ name, rating, summary, tags, image }) => {
    return (
        <div>
          <img src={image ? image.original : IMG_PLACEHOLDER} alt="show-cover" />
          <div>
            <div>
              <h1>{name}</h1>
              <div>
                <Star />
                <span>{rating.average || 'N/A'}</span>
              </div>
            </div>
            <div dangerouslySetInnerHTML={{ __html: summary }} />
    
            <div>
              Tags:{' '}
              <div>
                {tags?.map((tag, i) => (
                  <span key={i}>{tag}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      );
}

Or you can check if tags is not undefined by doing this:

const ShowMainData = ({ name, rating, summary, tags, image }) => {
    return (
        <div>
          <img src={image ? image.original : IMG_PLACEHOLDER} alt="show-cover" />
          <div>
            <div>
              <h1>{name}</h1>
              <div>
                <Star />
                <span>{rating.average || 'N/A'}</span>
              </div>
            </div>
            <div dangerouslySetInnerHTML={{ __html: summary }} />
    
            <div>
              Tags:{' '}
              <div>
                {tags && tags.map((tag, i) => (
                  <span key={i}>{tag}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      );
}

Upvotes: 1

Anuja
Anuja

Reputation: 1038

Issue happens because your tags variable is undefined, you may not be passing it as a prop. Safer alternative is:

    const ShowMainData = ({ name, rating, summary, tags, image }) => {
    return (
        <div>
          <img src={image ? image.original : IMG_PLACEHOLDER} alt="show-cover" />
          <div>
            <div>
              <h1>{name}</h1>
              <div>
                <Star />
                <span>{rating.average || 'N/A'}</span>
              </div>
            </div>
            <div dangerouslySetInnerHTML={{ __html: summary }} />
    
            <div>
              Tags:{' '}
              <div>
                {tags&& tags.length> 0 ? tags.map((tag, i) => (
                  <span key={i}>{tag}</span>
                )):null}
              </div>
            </div>
          </div>
        </div>
      );
}

Upvotes: 1

Related Questions