Posting data to Mongo database using axios (React front end) - reactjs

Question

I am re-creating a basic chat from a previous project (formerly used Bootstrap and Socket) and this go around I am utilizng a React component to render the chat (which consists of an input area for user name, an input area for text content, and a div where the username and message inserted should appear together i.e. "BugsBun01: "Whats up Doc?!"). I am unsure whether or not I should have the empty div where chat content belongs in a separate React component (my end goal is to have the parent component to immediately update the chat area whilst writing the content from the insert fields (username and text content) to the database collection)
I have Mongo database which contains a collection for chats (username/message) but my question is
A) how do I go about using axios to store the inserted username and text in the collection, and
B) once stored how would I allow the parent component (React) to immediately update them to the empty div (chatArea) from the mongo database so that upon page refresh, the users' old chats are still present?
Do I need componentDidMount()?
Do I need any middleware in my server.js file? (bodyparser etc.)
I am fairly new to using React js so bear with me. Also this is a fairly barebones chat that is focusing on functionality.
class Chat extends React.Component {
constructor(props){
super(props);
this.state = {
username: '',
message: '',
messages: []
};
}
render() {
return (
<div id="myChat">
<div id="status"></div>
<input type="text" id="username" class="form-control" placeholder="Enter Username..." value={this.state.username} onChange={ev => this.setState({username: ev.target.value})}>
</input>
<div id="chat">
<br></br>
<div class="card">
<div id="messages" class="card-block">
{this.state.messages.map(message => {
return (
<div>{message.author}: {message.message}</div>
)
})}
</div>
</div>
<br></br>
</div>
<textarea id="textarea" class="form-control" placeholder="Enter message..." value={this.state.message} onChange={ev => this.setState({message: ev.target.value})} ></textarea>
</div>
);
}
}

Answer 1

You have to need ur server for that is not necessary to use axios for that u can manage all thing with ur socket connection.
Server.js that manage ur backend which u want play with the database.
Server.js: implements a start the socket.
const io = require('socket.io')();
const AVATAR = 'https://i1.wp.com/tricksmaze.com/wp-content/uploads/2017/10/Stylish-Girls-Profile-Pictures-11.jpg';
const NAME = '#zoya';
io.on('connection', function (client) {
// console.log('client Id::', client.id)
//chat message
client.on('chat-message', function (messages) {
let { message } = messages;
let messageObj = {
sender: NAME,
avatar: AVATAR,
message
}
client.emit('chat-message', messageObj);
});
//disconnects...
client.on('disconnect', function () {
console.log('disconnect client Id::', client.id)
});
});
const port = 8000;
io.listen(port);
console.log('listening on port : ', port);
on client side.
'use static';
import React, { Component } from 'react';
import openSocket from 'socket.io-client';
const SERVER = `http://localhost:8000/`;
const NAME = '#asif';
const AVATAR = 'https://pbs.twimg.com/profile_images/874276197357596672/kUuht00m_400x400.jpg';
const AVATAR1 = 'https://i1.wp.com/tricksmaze.com/wp-content/uploads/2017/10/Stylish-Girls-Profile-Pictures-11.jpg';
class App extends Component {
constructor(props) {
super(props);
this.state = {
typing: '',
messages: []
}
this.socket = openSocket(SERVER);
this.chatMessage = this.chatMessage.bind(this);
}
componentDidMount() {
this.chatMessage();
}
chatMessage() {
this.socket.on('chat-message', (messageObj) => {
let { messages } = this.state;
messages.push(messageObj);
this.setState({ messages: messages })
})
}
sendMessage = () => {
let { messages, typing } = this.state;
if (typing && typing !== '') {
const message = typing;
this.setState({ typing: '' })
let messageObj = {
sender: NAME,
avatar: AVATAR,
message
}
messages.push(messageObj);
this.setState({ messages: messages })
this.socket.emit('chat-message', messageObj);
} else {
alert(`Message can't empty`);
}
};
renderItem() {
return this.state.messages.map((item,key)=>{
return (
<div >
<image src={ item.avatar } />
<div }>
<span >{item.sender}</span>
<span >{item.message}</span>
</div>
</div>
);
})
}
render() {
return (
<div >
<div >
<h1 >
Chat App
</h1>
</div>
{this.renderItem()}
<div >
<input
Type="text"
ref={ref => { this._messageInput = ref }}
placeholder="Type Message..."
value={this.state.typing}
onChangeText={text => this.setState({ typing: text })}
/>
<button onClick={() => this.sendMessage()}>
<span >Send</span>
</button>
</div>
</div>
);
}
}
export default App;
hope this help full for u.