Continuing from previous post of NodeJS and MongoDB step by step Example, now going to consume NodeJS API using React.
Below is the folder structure of React:
>npx create-react-app reactconsumeapi
>cd reactconsumeapi
>npm start
>npm i axios --save
I. Add folder Components under src>>AddEnquiry.jsx files and add code
Code Snippet:-
import React from "react";
import axios from "axios";
export default class AddEnquiry extends React.Component
{
constructor(){
super();
this.state={
eid:0,
name:'',
mobno:0,
email:'',
pid:0,
proj:[]
}
}
setData=(e)=>{
e.preventDefault();
this.setState({[e.target.name]:e.target.value});
}
componentDidMount() /*After the React component is rendered and
when the page is loading
this method will be */
{
axios.get("http://localhost:5000/AllProject").then(r=>{
console.log('Enquiry');
console.log(r.data);
this.setState({proj:r.data});
})
}
AddEnquiry=(e)=>{
e.preventDefault();
let enquiry={
EnquiryId:parseInt(this.state.eid),
Name:this.state.name,
MobileNo:parseInt(this.state.mobno),
EmailID:this.state.email,
ProjID:parseInt(this.state.pid)
}
console.log(enquiry);
axios.post("http://localhost:5000/NewEnquiry",enquiry).then(r=>{
console.log(r.data);
})
}
render()
{
return(
<>
<h1>Add Enquiry for Project</h1>
<table border="1" style={{backgroundColor:"lightcoral",border:'5px solid red'}}>
<tbody>
<tr>
<td>Enquiry ID:</td>
<td><input type="text" name="eid" onInput={this.setData}/></td>
</tr>
<tr>
<td>Enter Name:</td>
<td><input type="text" name="name" onInput={this.setData}/></td>
</tr>
<tr>
<td>Enter Mobile No:</td>
<td><input type="text" name="mobno" onInput={this.setData}/></td>
</tr>
<tr>
<td>Enter EmailID:</td>
<td><input type="text" name="email" onInput={this.setData}/></td>
</tr>
<tr>
<td>Select Project ID:</td>
<td><select name="pid" onChange={this.setData}>
{
this.state.proj.map(r=>
<option value={r.ProjID} key={r.ProjID}>
{r.ProjName}
</option>
)
}
</select></td>
</tr>
<tr>
<tr>
<button onClick={this.AddEnquiry}>Add Enquiry </button>
</tr>
</tr>
</tbody>
</table>
</>
)
}
}
II. Add folder Components under src>>AddProject.jsx files and add code
Code Snippet:-
import React from "react";
import axios from "axios";
export default class AddProject extends React.Component
{
constructor()
{
super()
{
this.state={
pid:0,
pname:'',
ptype:''
}
}
}
setData=(e)=>{
e.preventDefault();
this.setState({[e.target.name]:e.target.value})
}
AddData=(e)=>{
e.preventDefault();
let project={
ProjID:this.state.pid,
ProjName:this.state.pname,
ProjType:this.state.ptype
};
//It is calling from NodeJS api NewProject Method
axios.post("http://localhost:5000/NewProject",project).then(r=>{
console.log(r.data);
})
}
render()
{
return(
<>
<h1>Adding new Project</h1>
<form>
<table style={{backgroundColor:'yellow',color:'red',border:"5px solid green"}}>
<tbody>
<tr>
<td>Enter Project Id</td>
<td>
<input type="text" name="pid" onInput={this.setData}/>
</td>
</tr>
<tr>
<td>Enter Project Name</td>
<td>
<input type="text" name="pname" onInput={this.setData}/>
</td>
</tr>
<tr>
<td>Enter Project Type</td>
<td>
<input type="radio" name="ptype" value="On Going" onChange={this.setData}/> OnGoing
<input type="radio" name="ptype" value="Coming Soon" onChange={this.setData}/> Coming Soon
</td>
</tr>
<tr>
<td>
<button type="submit" onClick={this.AddData} >New Project</button>
</td>
</tr>
</tbody>
</table>
</form>
</>
)
}
}
III. Add folder Components under src>>ShoProjectByEnquiry.jsx files and add code
Code Snippet:-
import React from "react";
import axios from "axios";
export default class ShowProjectByEnquiry extends React.Component
{
constructor()
{
super();
this.state={
pid:0,
proj:[],
enquiry:[],
project:[]
}
}
componentDidMount() /*After the React component is rendered and
when the page is loading
this method will be */
{
axios.get("http://localhost:5000/AllProject").then(r=>{
console.log('ShowProjectByEnquiry');
console.log(r.data);
this.setState({proj:r.data});
})
}
setData=(e)=>{
e.preventDefault();
this.setState({[e.target.name]:e.target.value});
}
ShowEnquiry=(e)=>{
e.preventDefault();
console.log(this.state.pid);
axios.get("http://localhost:5000/ProjectByID/"+parseInt(this.state.pid)).then(r=>
{
console.log(r.data);
this.setState({project:r.data});
})
axios.get("http://localhost:5000/EnquiryByPID/"+parseInt(this.state.pid)).then(r=>
{
console.log(r.data);
this.setState({enquiry:r.data});
})
}
render()
{
return(
<>
<h1>Show Enquiry based on Project</h1>
<form>
<table border="1">
<tbody>
<tr>
<td>Select Project ID:</td>
<td><select name="pid" onChange={this.setData}>
{
this.state.proj.map(r=>
<option value={r.ProjID} key={r.ProjID}>
{r.ProjName}
</option>
)
}
</select>
</td>
</tr>
<tr>
<button onClick={this.ShowEnquiry}>Show Enquiries</button>
</tr>
</tbody>
</table>
<hr/>
{this.state.project.map(r=>
<h2>Project Type:{r.ProjectType} </h2>
)
}
<h2>Count:{this.state.enquiry.length}</h2>
<table style={{border:'5px dotted green'}}>
<tbody>
<tr>
<th>Name</th>
<th>Mobile No</th>
<th>Email ID</th>
<th>Project ID</th>
</tr>
{
this.state.enquiry.map(r=>
<tr>
<td>{r.Name}</td>
<td>{r.MobileNo}</td>
<td>{r.EmailID}</td>
<td>{r.ProjID}</td>
</tr>
)
}
</tbody>
</table>
</form>
</>
)
}
}
IV. Add code in index.js
Code Snippet:-
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import AddProject from './components/AddProject';
import AddEnquiry from './components/AddEnquiry';
import ShowProjectByEnquiry from './components/ShowProjectByEnquiry';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<AddProject/>
<AddEnquiry/>
<ShowProjectByEnquiry/>
</>
);
V. Glimpse of package.json
>cd C:\Users\subas.patel\Documents\Subas\Softwares\mongosh-1.6.2-win32-x64\mongosh-1.6.2-win32-x64\bin>mongosh
> use ABCBuilders
> db.ProjectInfo.find()
> db.EnquiryInfo.find()
No comments:
Post a Comment