Только начал познавать Реакт, возникло не понимание, почему данные не отображаются при вызове.
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, {Component} from "react";
const users = [{id: 1, name: 'Вася', avatar:"../image/user/owl-user.svg"}];
class RegisteredUser extends Component() {
constructor(props){
super(props);
const author = props.users[0];
}
render() {
return (
<div className="user_control ">
<button className="btn_user decor-borders" onClick={() => console.log("")}>
<Avatar user={author}/>
<span className="btn_user__name">{author.name}</span>
</button>
</div>
)
}
}
function Avatar(props) {
const user = props.user;
return (
<img className="Avatar"
src={user.avatarUrl}
alt={user.name}/>
);
}
<div>
<RegisteredUser users={users} />
</div>
ReactDOM.render(
<OurApp />, document.querySelector("#app"))
Необходимо что б в кнопку, компонент RegisteredUser, отобразилось имя пользователя и его аватара. Не могу понять, почему оно не передает данные в классовый компонент