Create Home.js component as parent & Two component client.js & server.js as child components
Home.js
import React from "react";
import Client from "./Client";
import Server from "./Server";
class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
data1: '',
date2: ''
}
}
updateParentState = (msg) => {
this.setState({
data1: msg
})
}
updateParentState2 = (msg) => {
this.setState({
data2: msg
})
}
render() {
return (
<div className="container mt-5 p-3">
<div className="row">
<div className="col bg-dark text-white">
<h2> Chatting Application</h2>
{/* <p>ClientMsg = {this.state.data1}</p>
<p>ServerMsg = {this.state.data2}</p> */}
</div>
</div>
<div className="row">
<div className="col-6">
<Client updateParentState = {this.updateParentState} message2 = {this.state.data2}/>
</div>
<div className="col-6">
<Server message = {this.state.data1} updateParentState2 = {this.updateParentState2}/>
</div>
</div>
</div>
);
}
}
export default Home;
Client.js
import React, { Component } from "react";
class Client extends Component {
constructor(props) {
super(props)
this.state = {
userData: "",
}
this.textRef = React.createRef();
}
getData = () => {
console.log(this.textRef.current.value);
this.props.updateParentState(this.textRef.current.value)
this.textRef.current.value = ''
}
updateState=(event) =>{
this.setState({
userData: event.target.value,
})
}
render() {
return (
<div className="container mt-3 p-3">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header bg-primary text-white">
<h2>User1</h2>
</div>
<div className="card-body">
<input ref={this.textRef} type="text" placeholder="Enter text here" className="form-control"
onChange={this.updateState}></input>
<button className="btn btn-primary m-2" onClick={this.getData}>Send</button>
</div>
<div className="card-footer">
<h3>{this.props.message2} </h3>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Client;
Server.js
import React from 'react';
class Server extends React.Component {
constructor(props) {
super(props)
this.state = {
userData:''
}
this.textRef = React.createRef();
}
getData = () => {
this.props.updateParentState2(this.textRef.current.value)
this.textRef.current.value = ''
}
updateState=(event) =>{
this.setState({
userData: event.target.value,
})
}
render() {
return (
<div className="container mt-3 p-3">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header bg-primary text-white">
<h2>User2</h2>
</div>
<div className="card-body">
<input ref={this.textRef} type="text" placeholder="Enter text here"
onChange={this.updateState} className="form-control"></input>
<button className="btn btn-primary m-2" onClick={this.getData}>Send</button>
</div>
<div className="card-footer">
<h3>{this.props.message}</h3>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Server;
PostedBy: pankaj_bhakre
No comments:
Post a Comment