Erro na função map para comentarios e likes

Boa noite, Clarisse! Como vai?

Vamos partir da mensagem de erro:

TypeError: Cannot read property 'map' of undefined

Isso significa que vc está tentando invocar o método map() a partir de alguém que está indefinido! E quem está indefinido é justamente o this.props.foto.likers.

Portanto, para descobrir o que está ocorrendo eu terei que dar uma olhada numa parte maior do código! Onde vc utiliza esse componente FotoInfo? Poderia colar aqui esse trecho de código?

Olá, eu estou usando o componente no arquivo FotoItem.js que completo é como segue:

import React, { Component } from 'react';

class FotoAtualizacoes extends Component {
    render(){
        return (
            <section className="fotoAtualizacoes">
              <a href="#" className="fotoAtualizacoes-like">Likar</a>
              <form className="fotoAtualizacoes-form">
                <input type="text" placeholder="Adicione um comentário..." className="fotoAtualizacoes-form-campo"/>
                <input type="submit" value="Comentar!" className="fotoAtualizacoes-form-submit"/>
              </form>

            </section>            
        );
    }
}

class FotoInfo extends Component {
    render(){
        return (
            <div className="foto-in fo">
              <div className="foto-info-likes">
                {
                  this.props.foto.likers.map(liker => {
                    return (<a href="#">{liker.login},</a>)
                  })
                }
                 curtiram

              </div>
              <p className="foto-info-legenda">
                <a className="foto-info-autor">autor </a>
                {this.props.foto.comentario}
              </p>

              <ul className="foto-info-comentarios">
                {
                  this.props.foto.comentarios.map(comentario => {
                    return (
                      <li className="comentario">
                        <a className="foto-info-autor">{comentario.login} </a>
                        {comentario.texto}
                      </li>
                    );
                  })
                }
              </ul>
            </div>            
        );
    }
}

class FotoHeader extends Component {
    render(){
        return (
            <header className="foto-header">
              <figure className="foto-usuario">
                <img src={this.props.foto.urlPerfil} alt="foto do usuario"/>
                <figcaption className="foto-usuario">
                  <a href="#">
                    {this.props.foto.loginUsuario}
                  </a>  
                </figcaption>
              </figure>
              <time className="foto-data">{this.props.foto.horario}</time>
            </header>            
        );
    }
}

export default class FotoItem extends Component {
    render(){
        return (
          <div className="foto">
            <FotoHeader foto={this.props.foto}/>
            <img alt="foto" className="foto-src" src={this.props.foto.urlFoto}/>
            <FotoInfo foto={this.props.foto}/>
            <FotoAtualizacoes/>
          </div>            
        );
    }
}

que por sua vez é renderizado na timeline:

import React, { Component } from 'react';
import FotoItem from './FotoItem';

export default class Timeline extends Component {

  constructor(){
    super();
    this.state = {fotos : []};
  }

    componentDidMount(){
      fetch("https://instalura-api.herokuapp.com//api/public/fotos/vitor")
        .then(response => response.json())
        .then(fotos =>{
          this.setState({fotos:fotos});
        });
    }

    render(){
        return (
        <div className="fotos container">
            {
              this.state.fotos.map(foto => <FotoItem foto/>)
            }

        </div>            
        );
    }
}

tenho a impressão de que o erro está na Promise, mas não consegui localizá-lo

Relendo a explicação da aula, acabei encontrando meu erro:

 this.state.fotos.map(foto => <FotoItem foto={foto}/>)

Eu tinha esquecido de terminar a declaração da tag FotoItem

Muito bem, Clarisse! Que bom que conseguiu resolver o problema! Só uma dica: veja que seguir as pistas dadas pelo erro foi algo muito importante. Eu fui pedindo pra vc mostrar os arquivos seguindo a ordem lógica de passagem da informação da foto através dos componentes. Essa é uma prática que ajuda muito para encontrar a fonte dos problemas durante o desenvolvimento!

Sempre que precisar de qualquer ajuda é só mandar aqui no fórum da Alura!

Grande abraço e bons estudos, minha aluna!