How to show a button only in the last item from a list?

Question

I'm still a beginner in ReactJS.

I have a list where I can go adding new lines. To add a line I use the plus button, and to remove the line I use the minus button.

I would like to know, how can I show the plus button only on the last item in my list? So that the plus button doesn't repeat itself unnecessarily.

Could you tell me how can I remove that unnecessary plus buttons? Thank you in advance.

Here's my code I put into codesandbox.

import React from "react";

import "./styles.css";

import List from "./List/List";

const App = () => {
  const [data, setData] = React.useState([
    [
      {
        label: "Name",
        value: "",
        name: "00"
      },
      {
        label: "Last Name",
        value: "",
        name: "01"
      }
    ]
  ]);

  const handleOnChange = (e, row, col) => {
    const newData = data.map((d, i) => {
      if (i === row) {
        d[col].value = e.target.value;
      }

      return d;
    });
    setData(newData);
  };

  const addRow = () => {
    console.log(data);
    setData([
      ...data,
      [
        {
          label: "Name",
          value: "",
          name: `${data.length}0`
        },
        {
          label: "Last Name",
          value: "",
          name: `${data.length}1`
        }
      ]
    ]);
  };

  const removeRow = (index) => {
    const _data = [...data];
    _data.splice(index, 1);
    setData(_data);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <List
        data={data}
        addRow={addRow}
        removeRow={removeRow}
        handleOnChange={handleOnChange}
      />
    </div>
  );
};

export default App;

import React from "react";

import AddCircleIcon from "@material-ui/icons/AddCircle";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import TextField from "@material-ui/core/TextField";

import "./styles.scss";

const List = ({ data, handleOnChange, addRow, removeRow }) => {
  return (
    <div className="container">
      {data.map((items, i1) => (
        <div key={i1} className="content">
          <div className="content-row">
            {items.map((item, i2) => (
              <TextField
                key={i2}
                label={item.label}
                value={item.value}
                onChange={(e) => handleOnChange(e, i1, i2)}
                variant="outlined"
                name={item.name}
              />
            ))}
          </div>
          <div>
            <AddCircleIcon onClick={addRow} />
            {data.length > 1 && (
              <RemoveCircleIcon onClick={() => removeRow(i1)} />
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default List;

Answer 1

You will need to add a condition when rendering your plus button:

So in your List Component:

Replace this:

<AddCircleIcon onClick={addRow} />

TO

{i1 === data.length - 1 && <AddCircleIcon onClick={addRow} />}

Working example