De acordo com o mostrado na pergunta, o código parece funcionar normalmente quando testado em um sandbox.
Isso pode estar ocorrendo por problemas de timing, onde o render do component TimeCasa
está sendo chamando antes do estado times
ser preenchido.
Isso é um problema bastante comum quando se trata com métodos assíncronos ou que não possuem uma resposta imediata.
Uma boa forma de consertar isso é utilizando do Short Circuit Evaluation, ou Conditional Rendering.
Você poderia simplesmente checar se o valor de pos
(considerando que ele tem uma referência do primeiro valor do array times
) é um valor truthy
:
<h1 className="time">{pos && pos.nome}</h1>
Se não entendeu muito bem, recomendo ler esta resposta e o link que deixei acima sobre conditional rendering.
###Como eu poderia fazer pra segurar o render até o ajax terminar?
Como eu poderia fazer pra segurar o render até o ajax terminar?
Antes que o render seja chamado, o método componentWillMount
é chamado, você pode fazer as operações la dentro, mas mesmo assim não é certo que elas serão terminadas antes que o render seja chamado, inclusive não é muito recomendado que o use, veja aqui o porque.
Uma forma que garantiria seria retornar nada no render caso o valor de times
ainda não esteja preenchido, mas eu também não recomendo que faça isso, talvez mostrar um loading seja melhor.