var ListItem = React.createClass({ displayName: "ListItem",
getInitialState: function () {
return {fruit: this.props.value.product.fruit, meat: this.props.value.product.meat, vegetable: this.props.value.product.vegetable, total: 0 };
},
render: function () {
return (
React.createElement("tr", null,
React.createElement("td", null, React.createElement("input", { type: "text", name: "fruit", value: this.state.fruit, onChange: this.handleChange, placeholder: "fruit" })),
React.createElement("td", null, React.createElement("input", { type: "number", name: "meat", value: this.state.meat, onChange: this.handleChange, placeholder: "..." })),
React.createElement("td", null, React.createElement("input", { type: "number", name: "vegetable", value: this.state.vegetable, onChange: this.handleChange, placeholder: "..." })),
React.createElement("td", { className: "total" }, this.state.total)));
},
Now I want to change Fruit, Meat and Vegetable to "form" instead of "input" with drop down options so when I click on Fruit I will have drop down options of "apple, banana, strawberry". Meat options will be "pork, beef, lamb" etc...
I've try using
return React.createElement("select", {},
React.createElement("option", {value: "A"}, "Option A"),
React.createElement("option", {value: "B"}, "Option B"),
React.createElement("option", {value: "C"}, "Option C")
);