Надеясь, что кто-нибудь может помочь мне с этой проблемой, которая у меня возникла. В основном я создаю бюджетное приложение. Вы вводите свой бюджет, название товара и стоимость и отправляете его. Затем он напечатает его в нижней части приложения (другой компонент), и я сделаю некоторые расчеты для оставшегося бюджета и т. Д. c.
В настоящее время я застрял при передаче значений из моего компонента с состоянием в мой функциональный компонент. Мне удалось передать данные через реквизит и перебрать их. Однако вместо вывода данных, которые мне нужны, в формате li, он просто выводит точки маркера li. Если я изменяю возвращенный вывод на текст, он отображает текст (console.log также работает) в формате li, но по какой-то причине, если я пытаюсь вывести реквизит, он не будет.
Любая помощь приветствуется.
class FormInput extends Component {
constructor(props) {
super(props);
this.state = { budget: 0, items: [] };
}
handleSubmit = (event) => {
event.preventDefault();
const item = [
{ name: event.target.itemName.value, price: event.target.itemCost.value },
];
const budget = { budget: event.target.budget.value };
this.setState({ budget, items: [...this.state.items, ...item] });
};
const Cost = (props) => {
const test = props.item.map((ite, index) => (
<li key={index}> {ite.item} </li>
));
return (
<div>
<Container
style={{
alignitems: "center",
textAlign: "left",
fontWeight: "bold",
color: "black",
}}
>
<Card>
<Card.Body>
{" "}
<ul> {test} </ul>{" "}
</Card.Body>
</Card>
</Container>
</div>
);
};