如何循环遍历数组并使用映射向 React 项目添加一个数字

Question

I am trying to loop through an array in react and trying to add 1(or any other value) to the value of "mktratedelta" with the "handleplus" function I made. I also created a button which calls this function "handleplus". But whenever try to click on the button i get "NaN" value in the field. How can i fix this issue and is this the right approach?

function TableExampleStriped() {
  const [marketEstimateDataBCAssets, setmarketEstimateData] = useState([
    {
      name: "BcLombard",
      prevgroupinputrate: 0.01,
      currgroupinputrate: 12.0,
      mktratedelta: 4.0,
      mktrateestimate: 20.0
    },
    {
      name: "BcOtherSecured",
      prevgroupinputrate: 0.01,
      currgroupinputrate: 17.0,
      mktratedelta: 3.0,
      mktrateestimate: 10.0
    },
    {
      name: "BcUnsecured",
      prevgroupinputrate: 0.01,
      currgroupinputrate: 7.0,
      mktratedelta: 2.0,
      mktrateestimate: 10.0
    }
  ]);

  const handleChange = item => e => {
    const newArr = marketEstimateDataBCAssets.map(el => {
      if (el.name === item.name) {
        return {
          ...el,
          mktratedelta: parseFloat(e.target.value),
          mktrateestimate: (
            parseFloat(e.target.value) + item.currgroupinputrate
          ).toFixed(2)
        };
      }
      return el;
    });

    return setmarketEstimateData([...newArr]);
  };

  const handleplus = item => e => {
    const newArr = marketEstimateDataBCAssets.map(el => {
      if (el.name === item.name) {
        return {
          ...el,
          mktratedelta: parseFloat(e.target.value) + 1.0
        };
      }
      return el;
    });

    return setmarketEstimateData([...newArr]);
  };

 <Table.Cell>
                {marketEstimateDataBCAssets.map(item => {
                  if (item.name === "BcOtherSecured") {
                    return <button onClick={handleplus(item)} />;
                  }
                })}
 </Table.Cell>

<Table.Cell>
                {marketEstimateDataBCAssets.map(item => {
                  if (item.name === "BcOtherSecured") {
                    return (
                      <input
                        value={item.mktratedelta}
                        onChange={handleChange(item)}
                      />
                    );
                  }
                })}
</Table.Cell>

Answer 1

For passing data in onClick event of react you need to use the arrow function

Like below

return <button onClick={(e) => this.handleplus(item)} />;

Please refer the react documentation for handling events here

Answer 2

I do not see any value present at button like it is at input tag, so whenever it tries to check e.target.value onButton click it will give an undefined and If we do parseFloat(undefined) it will return NaN . you are passing item in onclick, you can fetch required value from it that is present in it.