英文:
How to use the map method in react using props?
问题
import History from "./History";
import { useState } from "react";
const Input = function () {
const arr = [];
const [expense, setExpense] = useState("");
const [amount, setAmount] = useState("");
const [state, setState] = useState(false);
const expenseChangeHandler = function (e) {
setExpense(e.target.value);
};
const amountChangeHandler = function (e) {
setAmount(e.target.value);
};
const clickHandler = function () {
setState(true);
arr.push({
expense: expense,
amount: amount,
});
};
return (
<div>
<input value={expense} onChange={expenseChangeHandler}></input>
<input value={amount} onChange={amountChangeHandler}></input>
<button onClick={clickHandler}>Add</button>
{state && <History arr={arr}></History>}
</div>
);
};
export default Input;
import "./History.css";
const History = function (props) {
const arr = props.arr;
const newArr = arr.map((el) => (
<p key={el.expense}>{el.expense}</p>
)); // Added a key to each 'p' element for React's optimization
return (
<div className="div1">
<h2>History</h2>
<div>{newArr}</div>
</div>
);
};
export default History;
To render the expenses from the arr array in the History component, you can map through the arr and create p elements for each expense. I also added a key prop to each p element for React's optimization. This should display the expenses in the History component when the button in the Input component is clicked.
英文:
import History from "./History";
import { useState } from "react";
const Input = function () {
const arr = [];
const [expense, setExpense] = useState("");
const [amount, setAmount] = useState("");
const [state, setState] = useState(false);
const expenseChangeHandler = function (e) {
setExpense(e.target.value);
};
const amountChangeHandler = function (e) {
setAmount(e.target.value);
};
const clickHandler = function () {
setState(true);
arr.push({
expense: expense,
amount: amount,
});
};
return (
<div>
<input
value={expense}
onChange={expenseChangeHandler}
></input>
<input
value={amount}
onChange={amountChangeHandler}
></input>
<button onClick={clickHandler}>Add</button>
{state && <History arr={arr}></History>}
</div>
);
};
export default Input;
Basically whats important to note here is that I am passing in the arr array as a prop for the History component.
import "./History.css";
const History = function (props) {
const arr = props.arr;
const newArr = arr.map((el) => <p>{el.expense}</p>);
return (
<div className="div1">
<h2>History</h2>
<div>{newArr}</div>
</div>
);
};
export default History;
When the button in the parent component, Input, is clicked all it renders is 'History', from the h2 tag but I also want it to render the expense from the arr array. Any help?
答案1
得分: 1
问题出现在Input组件上，你需要使用useState将arr作为状态变量。
const [arr, setArr] = useState([])
而不是使用arr.push，应该使用setArr(arr => [...arr, {expense, amount}])。
英文:
The problem exists on Input component, you need to make arr as state variable using useState.
const [arr, setArr] = useState([])
And instead of arr.push, setArr(arr => [...arr, {expense, amount}])
答案2
得分: 0
我已解决了这个问题，这里是链接 https://codesandbox.io/s/peaceful-williamson-g8r2vl?file=/src/App.js
你需要将 "arr" 设置为状态变量，并更新它为 [...arr, {newarritem}]。
英文:
I have solved the issue, here is the link https://codesandbox.io/s/peaceful-williamson-g8r2vl?file=/src/App.js
you need a have arr as state variable and update it [...arr,{newarritem}]
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论