Dynamically add input field React

Question

I am trying to add a new row of input directly under the current row. However, I can only add the new input at the bottom of the array instead of directly after the object within the array

  const initialState = [
    { name: "John", Age: 0, height: 0, weight: 0 },
    { name: "Mary", Age: 0, height: 0, weight: 0 },
    { name: "Darren", Age: 0, height: 0, weight: 0 },
    { name: "Eli", Age: 0, height: 0, weight: 0 },

  ];

  const [infoValues, setInfoValues] = useState(initialState);

// I want to add the new row directly under the current one instead at the last

  const addInputRow = () => {
    setInfoValues([
      ...infoValues,
      { name: "Eli", Age: 0, height: 0, weight: 0},
    ]);
  };

  const removeInputRow = (index) => {
    const valueList = [...infoValues];
    valueList.splice(index, 1);
    setInfoValues(valueList);
  };

What is the current row in your example? Please show us where you want { name: "Eli", Age: 0, height: 0, weight: 0} to appear in addition to the initialState array. In other words, indicate what is the expected result based on your initial and input data. — gacanepa
– gacanepa, Commented Oct 8, 2021 at 0:32

Ryan Wheale · Accepted Answer · 2021-10-08 00:11:27Z

2

You're almost there. You're addInputRow method should accept an index, and you would splice the value similar to how you remove:

Note the second splice parameter is 0 - this means "remove 0 items during the splice". The third parameter means "insert this item at the specified index".

  const addInputRow = (index) => {
    const valueList = [...infoValues];
    valueList.splice(index, 0, { name: "Eli", Age: 0, height: 0, weight: 0})
    setInfoValues(valueList);
  };

answered Oct 8, 2021 at 0:11

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hardgrind Over a year ago

I just tried that but it didnt work, instead of adding the new input row at last of the array it added at the beginning of the array

Ryan Wheale Over a year ago

That's only possible if your index is 0. If the index is 2, the item would get inserted at position 2. const arr = ['a', 'b', 'c', 'd']; arr.splice(2, 0, 'z'); would result in ["a", "b", "z", "c", "d"].

maxpsz · Accepted Answer · 2021-10-08 00:40:05Z

I bet that the reason why Ryan's answer is not working for you, is that you are not correctly passing the index to the function, because when splice get undefined for the starting point, it will behave like if it is a 0, and add it to the first place.

Check this out, maybe can give you some clarity:

import React, { useState } from "react";

const initialState = [
  { name: "John", Age: 0, height: 0, weight: 0 },
  { name: "Mary", Age: 0, height: 0, weight: 0 },
  { name: "Darren", Age: 0, height: 0, weight: 0 },
  { name: "Eli", Age: 0, height: 0, weight: 0 }
];

export default function App() {
  const [infoValues, setInfoValues] = useState(initialState);

  const addInputRow = (index) => {
    const newInfoValues = [...infoValues];
    newInfoValues.splice(index + 1, 0, { name: "Eli", Age: 0, height: 0, weight: 0 });

    setInfoValues(newInfoValues);
  };

  return (
    <div className="App">
      <ul>
        {infoValues.map((value, index) => (
          <li key={index} onClick={() => addInputRow(index)}>
            {value.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

Collectives™ on Stack Overflow

Dynamically add input field React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related