35
rated 0 times
[
36]
[
1]
/ answers: 1 / hits: 16429
/ 6 Years ago, sun, september 9, 2018, 12:00:00
I am making react project using express.js, mongodb, react.js, and node.js. and trying to fetch data from backend api which is running on port 5000.
When I check the api using postman, it is working. And the data is showing in the browser's console. Also, when I press Get button as given in the code below, it doesn't work on the browser. But I'm able to see the array data in the browser's console.
<Button onClick={()=><li>{employeeItem}</li>}>Get</Button>
Here is my full code:
import React, { Component } from react;
import {
form,
FormGroup,
FormControl,
ControlLabel,
Button
} from react-bootstrap;
import ./App.css;
import { stringify } from querystring;
class App extends Component {
constructor(props) {
super(props);
this.AddName = this.AddName.bind(this);
this.AddContact = this.AddContact.bind(this);
this.AddAge = this.AddAge.bind(this);
this.state = {
name: ,
contact: ,
age: ,
employees: []
};
}
AddName(e) {
this.setState({ name: e.target.value });
}
AddContact(e) {
this.setState({ contact: e.target.value });
}
AddAge(e) {
this.setState({ age: e.target.value });
}
componentWillMount() {
fetch(http://localhost:5000/api/employees)
.then(res => res.json())
.then(data => this.setState({ employees: data }));
}
render() {
const employeeItem = this.state.employees.map(employee => (
<div key={employee._id}>
<h3>{employee.name}</h3>
<p>{employee.contact}</p>
<p>{employee.age}</p>
</div>
));
return (
<div className=App>
<header className=App-header>
<h1 className=App-title>Employee List</h1>
</header>
<div className=Layout>
<form>
<FormGroup>
<ControlLabel>Name:</ControlLabel>
<FormControl
type=text
value={this.state.name}
placeholder=Employee name
onChange={this.AddName}
/>
<div>
<ControlLabel>Contact:</ControlLabel>
<FormControl
type=number
value={this.state.contact}
placeholder=Mobile number
onChange={this.AddContact}
/>
</div>
<div>
<ControlLabel>Age:</ControlLabel>
<FormControl
type=number
value={this.state.age}
placeholder=Age
onChange={this.AddAge}
/>
</div>
</FormGroup>
<Button type=submit>Add</Button>
<Button onClick={() => console.log({ employeeItem })}>Get</Button>
<Button type=submit>Delete</Button>
</form>
</div>
</div>
);
}
}
export default App;
More From » node.js
