Rendering async data

[ThiagoMiranda]

• What do you expect to happen?
  Focusable border been shown to navigate with LG controls

• What actually happens?
  Focusable border won't show and I can't navigate

• Which browsers are affected?
  I've tested on Chrome and on 3.0 WebOS emulator

I don't know if this is the place for this ( I know that this is an early framework and it's fantastic how much does this works already ) but are you guys having trouble with async data on focusable elements? I've tried to follow this tutorial ( https://medium.com/@raphamorim/developing-for-tvs-with-react-tv-b5b5204964ef ) and it worked great but when I've added a async data the focusable border ( red one ) isn't show so I can't navigate on the TV.

	componentDidMount() {
		axios.get('http://test.com/data')
		.then(response => this.setState({
			videos: response.data
		})).catch(error => console.log(error));
	}

	render() {
		return (<div className="my-app">
			<HorizontalList title="Lista de vídeos" data={this.state.videos} env={this.state.env}/>
		</div>)
	}

My solution, for now, is to wrap all up in the axios promise

axios.get(''http://test.com/data'')
.then(response => {
	ReactTV.render(
		<SampleTV videos={response.data}/>, document.querySelector('#root')
	);
}).catch(error => console.log(error));

[raphamorim]

Hm, thanks for the report @ThiagoMiranda.
I'm working on it (related #85).

[raphamorim]

Hi @ThiagoMiranda, I published a newer version of React-TV which be able to solve this problem (0.3.4).
But you have to use react-tv-navigation for it work.