Есть три компонента: OwnMessage, MessageInput, MessageList. В компоненте MessageList должны отображатся компоненты Message (сообщение какого-то пользователя) и OwnMessage (Сообщение, которое отправил я). В MessageInput я ввожу сообщение и нажимаю кнопку Send, после нажатия кнопки Send, компонент OwnMessage должен добавлятся в компонент MessageList, что-то типо appendChild. Вместо этого OwnMessage рендерится в компоненте messageInput, как мне передать OwnMessage после нажатия кнопки Send в MessageInput в MessageList? Я тупо не понимаю как их связать.
OwnMessage
import React from 'react';
import './styles/OwnMessage.css';
class OwnMessage extends React.Component {
editMessage = (e) => {
const msgContainer = e.target.parentNode.querySelector('.message-text');
const savebtn = document.querySelector('.save-hide');
const inputblock = document.querySelector('.message-input-text');
inputblock.value = this.props.message;
savebtn.style = 'display: inline';
savebtn.addEventListener('click', ()=>{
const inputmsg = document.querySelector('.message-input-text');
savebtn.style = 'display: none';
msgContainer.textContent = inputmsg.value;
inputmsg.value = '';
})
}
deleteMessage = (e) => {
e.target.parentNode.remove();
}
render() {
const time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
const msgTime = `${hours}:${minutes}`;
return(
<div className="own-message">
<p className="message-text">{this.props.message}</p>
<button onClick={this.editMessage} className="message-edit">Edit</button>
<button onClick={this.deleteMessage} className="message-delete">x</button>
<time className="message-time">{msgTime}</time>
</div>
)
}
}
export default OwnMessage;
MessageInput
import React from 'react';
import './styles/MessageInput.css';
import OwnMessage from './OwnMessage';
class MessageInput extends React.Component {
state = {
users: []
}
sendMessage = () => {
const inputText = document.querySelector('.message-input-text');
this.setState({
users: [...this.state.users, <OwnMessage message={inputText.value} />]
})
inputText.value = '';
}
render() {
return(
<div className="message-input">
<input type="text" className="message-input-text" placeholder="Message"></input>
<button onClick={this.sendMessage} className="message-input-button">Send</button>
<button className="message-input-button save-hide">Save</button>
{this.state.users}
</div>
)
}
}
export default MessageInput;
MessageList
import React from 'react';
import Message from './Message';
import './styles/MessageList.css'
class MessageList extends React.Component {
state = {
show: true,
counter: 1
}
render() {
const data = this.props.data;
const counter = this.state.counter;
return(
<div className="message-list">
<Message name = {data[0].user} msg = {data[0].text} photo = {data[0].avatar}/>
<div className="messages-divider"></div>
{this.state.show ? (
<Message name = {data[counter].user} msg = {data[counter].text} photo = {data[counter].avatar}/>
) : null
}
</div>
)
}
}
export default MessageList;