return (
<>
{props.dialogsPage.state.message.map((item, index) => (
<>
<div className={s.profile}>
<img key={`message-${index}`} src={ item.url} alt="img" />
<div className={s.text}>
<span><NavLink className={s.navlink} href="/profile">{ item.name}</NavLink > <a>{ item.time}</a></span>
<p key={`message-${index}`} > { item.message}</p>
</div>
</div>
<input onChange={onNewMessagechange} type="text" />
<button onClick={() => {addMessage()}} >add</button>
</>
))}
</>
)
{props.dialogsPage.state.message.map((item, index) => (
<p key={`message-${index}`}>{item.message}</p>
))}
Вот строки из документации:
- Your components will re-render an extra time to find bugs caused by impure rendering.
- Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
- Your components will re-run refs callbacks an extra time to find bugs caused by missing ref cleanup.
- Your components will be checked for usage of deprecated APIs.