нашел в книжке таки!
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
randomUsersList: [],
loading: false
};
}
componentDidMount() {
this.setState({loading: true})
fetch('https://api.randomuser.me/?results=20')
.then(response => response.json())
.then( usersList => usersList.results )
.then( userNames => userNames.map( user => user.name) )
.then( namesList => namesList.map(name => name.first +' ' + name.last) )
.then( preparedNamesList => this.setState(
{randomUsersList: preparedNamesList , loading: false}) )
}
render() {
const { randomUsersList, loading } = this.state
console.log(randomUsersList)
return(
<div className="columns-center">
<LeftColumn/>
<div className="content">
<h1> Случайные пользователи </h1>
<div>
{ loading ? <p>Wait five seconds.....</p> :
!randomUsersList.length ? <p>No users.....</p> :
randomUsersList.map(userName => <p>{userName}</p>)
}
</div>
</div>
<RightColumn/>
</div>
);
}
}
уфф
нужно, чтобы код был понятным
Так он понятный вроде?
Обсуждают сегодня