import React, { Component } from 'react';
class ComposeSalad extends React.Component {
constructor(props) {
this.state = {
chosenProtein: []
}
}
handleClick = () => {
}
onProteinClick = (event) => {
console.log(event.target.checked, event.target.name);
}
render() {
const inventory = this.props.inventory;
// test for correct ussage, the parent must send this datastructure
if (!inventory) {
alert("inventory is undefined in ComposeSalad");
}
let foundations = Object.keys(inventory).filter(name => inventory[name].foundation);
let protein = Object.keys(inventory).filter(name => inventory[name].protein);
let extras = Object.keys(inventory).filter(name => inventory[name].extra);
let dressing = Object.keys(inventory).filter(name => inventory[name].dressing);
return (
<div className="container">
<h4>Välj bas</h4>
<form id = "foundationChoice" onSubmit={() => this.onSubmitHandler}>
<select>
{foundations.map(name => <option key={name}>
{name} +{inventory[name].price}kr</option>)}
</select>
<h4>Välj protein:</h4>
{protein.map(name => <div key={name}> <form> <input type="checkbox" id="proteinChoice" onChange={this.onProteinClick} />
{name} +{inventory[name].price}kr </form></div>)}
<h4>Välj extras:</h4>
{extras.map(name => <div key={name}> <form> <input type="checkbox" id="extraChoice" />
{name} +{inventory[name].price}kr</form></div>)}
<h4>Välj dressings:</h4>
<select>
{dressing.map(name => <option key={name}>
{name} +{inventory[name].price}kr</option>)}
</select>
</form>
</div>
);
}
}
export default ComposeSalad;
class ComposeSalad extends React.Component {
constructor(props) {
this.state = {
chosenProtein: []
}
}
handleClick = () => {
}
onProteinClick = (event) => {
console.log(event.target.checked, event.target.name);
}
render() {
const inventory = this.props.inventory;
// test for correct ussage, the parent must send this datastructure
if (!inventory) {
alert("inventory is undefined in ComposeSalad");
}
let foundations = Object.keys(inventory).filter(name => inventory[name].foundation);
let protein = Object.keys(inventory).filter(name => inventory[name].protein);
let extras = Object.keys(inventory).filter(name => inventory[name].extra);
let dressing = Object.keys(inventory).filter(name => inventory[name].dressing);
return (
<div className="container">
<h4>Välj bas</h4>
<form id = "foundationChoice" onSubmit={() => this.onSubmitHandler}>
<select>
{foundations.map(name => <option key={name}>
{name} +{inventory[name].price}kr</option>)}
</select>
<h4>Välj protein:</h4>
{protein.map(name => <div key={name}> <form> <input type="checkbox" id="proteinChoice" onChange={this.onProteinClick} />
{name} +{inventory[name].price}kr </form></div>)}
<h4>Välj extras:</h4>
{extras.map(name => <div key={name}> <form> <input type="checkbox" id="extraChoice" />
{name} +{inventory[name].price}kr</form></div>)}
<h4>Välj dressings:</h4>
<select>
{dressing.map(name => <option key={name}>
{name} +{inventory[name].price}kr</option>)}
</select>
</form>
</div>
);
}
}
export default ComposeSalad;