I've been trying to get the values of JSON data that i've set into the local storage. I've then tried to access this data (which is in the APP.js state) from the Food.js file using a .map function . The values returned are only in the alert in APP.js which is [object Object],[object Object],[object Object] and then it says .map is not a function. WOuld you guys know what's going on?
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Food from './Food.js';
import Form from './Form.js';
class App extends Component {
constructor(){
super();
var testObject = [
{title: "Pumpkin Pie", ingredients: ["Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust"]},
{title: "Spaghetti", ingredients: ["Noodles", "Tomato Sauce", "(Optional) Meatballs"]},
{title: "Onion Pie", ingredients: ["Onion", "Pie Crust", "Sounds Yummy right?"]}
];
localStorage.setItem('testObject', JSON.stringify(testObject));
this.state = {
apple:localStorage.getItem('testObject')
}
alert(JSON.parse(localStorage.getItem('testObject')));
}
render() {
return (
<div className="App">
<div id="app">
<div>
<ul>
<Food ingTitle={this.state.apple} />
</ul>
</div>
</div>
<Form />
</div>
);
}
}
export default App;
FOOD.js
import React, { Component } from 'react';
import './Food.css';
import FoodList from './FoodList.js';
export default class Food extends Component {
constructor(props){
super(props);
this.state = {
isToggleTrue:false
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(e){
e.preventDefault();
this.setState(prevState => ({
isToggleTrue: !prevState.isToggleTrue
}));
};
render() {
return (
<div className="Food">
<li className="foods"><a href="#" onClick={this.handleClick}>asdfasdf</a>
<FoodList name ="asdf" />
</li>
<div>{
this.props.ingTitle.map((a,i) => {
<li>{a.ingredients}</li>
})
}</div>
</div>
);
}
}