How can i re rendered reactjs component - reactjs

Question

How can I update my state value inside child component in this property {this.state.username} using of this function this.messageSubmit and how can I re-render the child render for displaying changed state values. Please help me anyone how can I update my state value inside and chat box because I'm new to reactjs
This is my child component chatting.js
import React from "react";
export class Chatting extends React.Component{
constructor(props){
super(props);
this.state={
username: 'shiva'
}
this.messageSubmit=this.messageSubmit.bind(this);
this.messageTextBox=this.messageTextBox.bind(this);
}
messageTextBox(event){
this.setState=({
username :event.target.value
})
}
messageSubmit(){
console.log(this.setState.username);
}
render(){
return(
<div>
<div className="chat-decription">
<div className="rt">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p>Flush to the bottom right. Uses .btm-right only.</p>
</div>
</div>
</div>
<div className="fl">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p>Flush to the bottom right. Uses .btm-right only.</p>
</div>
</div>
</div>
<div className="rt">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p> {this.setState.username}</p>
</div>
</div>
</div>
<div className="fl">
<div className="talk-bubble tri-right btm-right">
<div className="talktext">
<p>Flush to the bottom right. Uses .btm-right only.</p>
</div>
</div>
</div>
</div>
<div className="chat-textfiled">
<input type="text" className="form-control text-form" onChange={this.messageTextBox}/>
<input type="button" value="submit" onClick={this.messageSubmit}/>
</div>
</div>
)
}
}
This is my parent class
import React from "react";
import {render} from "react-dom";
import {Default} from "./component/Default";
import {Chatting} from "./component/Chatting";
import {BrowserRouter as Router,Route,Link,Switch } from 'react-router-dom';
// import Background from '../images/person_img.png';
class App extends React.Component{
constructor(){
super();
}
render(){
return(
<Router>
<div className="container">
<div className="container-top">
<div className="col-lg-4 leftmenu-contact-bg">
<div className="searchbox">
<div className="textbox-bg">
<input type="text" className="form-control" placeholder="Search"/>
</div>
</div>
<div className="ex1">
<a href="/chattting">
<div className="left-list">
<div className="left-img"><i className="material-icons icon-color">person</i></div>
<div className="right-content">dgfg</div>
</div>
</a>
</div>
</div>
<div className="col-lg-8 row">
<Switch>
<Route exact path='/' component={Default} />
<Route exact path='/chattting' component={Chatting} />
</Switch>
</div>
</div>
</div>
</Router>
);
}
}
render(<App/>,document.getElementById('app'));

Answer 1

setState is a function.
You should write:
this.setState({
username: event.target.value
});
Also, instead of
console.log(this.setState.username);
You should write
console.log(this.state.username);
And, again, instead of:
<p>{this.setState.username}</p>
You should write
<p>{this.state.username}</p>

Answer 2

In addition to the syntax corrections by #Rahamin, couple of pointers to your code -
Calling setState in the render function directly shouldn't be used, as it'll go into an infinite recursive function call stack. You'll probably be thrown an error of Maximum update depth exceeded.
Also, using console.logdirectly in the function that sets the state won't give you the desired output as they are queued and updated. It's best to include such console.log statements in the render itself.
Lastly, please post questions with good formatted code :)