Accueil>Tests>Questions>Le composant mélange affichage et récupération de données.

Question du test React (legacy)

Le composant mélange affichage et récupération de données.

Difficile

class Comments extends React.Component {
	constructor(props) {
		super(props);
		this.state = { 
			comments: [],
			isFetching: true
		}
	}
	
	shouldComponentUpdate(nextProps, nextState) {
		return nextState.comments.length !== this.state.comments.length;
	}
	
	componentDidMount() {
		fetchComments().then((comments) => {
			this.setState({ comments, isFetching: false });
		})
	}
	
	render() {
		return (
			<div>
				{	this.state.isFetching 
						? <p>Loading...</p>
						: this.state.comments.map((comment, i) => <p key={i}>{ comment }</p>)
				}
			</div>
		);
	}
}