//search.js file
import axios from "axios";
export function storeInput(input, callback) {
//input = document.getElementById("a").value;
let result = [];
console.log(input);
if (!callback) return;
axios.post("http://localhost:4000/id", {
searchWord: input,
}).then((response) => {
result = response.data;
console.log(result);
});
callback([
{
result
}
]);
}
This function is designed to retrieve data from the backend and display it properly. The data arrays are displayed in the console as shown below. I attempted to format the object for rendering on a webpage with no success.
[{…}]
0:
brand_name: "Lays"
calories: 160
calories_fat: 90
first_ingredient: "other"
processed: "yes"
product: "Classic potato chips"
saturated_fat: 2
serving_size: 28
short_name: "potato chips"
sodium: 170
sugar: 1
trans_fat: 0
_id: "60207f84a8241d2bb803423b"
__proto__: Object
length: 1
__proto__: Array(0)
Here is the frontend code attempting to render the object and display it on the page.
//snack-search.components.js file
import React, { Component } from 'react';
import {storeInput} from "./search.js";
const Snacks = props => (
<tr>
<td>{props.snacks.brand_name}</td>
<td>{props.snacks.product}</td>
<td>{props.snacks.short_name}</td>
<td>{props.snacks.serving_size}</td>
<td>{props.snacks.calories}</td>
<td>{props.snacks.calories_fat}</td>
<td>{props.snacks.saturated_fat}</td>
<td>{props.snacks.trans_fat}</td>
<td>{props.snacks.sodium}</td>
<td>{props.snacks.sugar}</td>
<td>{props.snacks.first_ingredient}</td>
<td>{props.snacks.processed}</td>
</tr>
)
export default class SnackSearch extends Component {
constructor(props) {
super(props);
this.state = { snacks: null };
}
setSnackState(snacks = null) {
this.setState({ snacks });
}
componentDidMount() {
// make async call here not in render
const callback = (snacks) => this.setSnackState(snacks);
storeInput("Lays", callback);
}
SnackList() {
const snacksList = this.state.snacks;
return (
snacksList &&
snacksList.map((currentSnack, i) => (
<Snacks snacks={currentSnack} key={i} />
))
);
}
render() {
return (
<div className = "search">
<table> {this.SnackList()}</table>
</div>
)
}
}