react-web-app-01

class Products extends React.Component { constructor() { super(); this.state = { products: [] } } componentDidMount() { axios.get("http://localhost:63475/api/products") .then(response => { console.log(response.data); this.setState({ products: response.data }); }); // this.postContent(); } postContent = () => { console.log('POSTING CONTENT'); //axios.get("http://localhost:63475/api/items/1") // .then(response => { // console.log(response.data); // }); axios('http://localhost:63475/api/items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, data: JSON.stringify({ Name: 'test@test.com', Category: 'Test123!', Price: 1.39 }) //data: { Name: 'test@test.com', Category: 'Test123!', Price: 1.39 } }) //const data = JSON.stringify({ Name: 'test@test.com', Category: 'Test123!', Price: 1.39 }); //const headers = { 'Content-Type': 'application/json' }; //axios.post('http://localhost:63475/api/items', data, { headers }); } render() { return ( <section> <h1>Products List</h1> <div> <table> <thead><tr><th>Product Id</th><th>Product Name</th><th>Product Category</th><th>Product Price</th></tr></thead> <tbody> { this.state.products.map((p, index) => { return <tr key={index}><td>{p.ProductId}</td><td> {p.ProductName}</td><td>{p.ProductCategory}</td><td>{p.ProductPrice}</td></tr>; }) } </tbody> </table> </div> </section> ) } } ReactDOM.render( <Products />, document.getElementById('myContainer'));