Handling keys of objects in an array on form submit

[kevinldg]

{instructions.map((instruction, index) => (
        <div key={index}>
          <input
            type="text"
            value={instruction}
            onChange={(e) => handleInstructionChange(index, e.target.value)}
          />
          <button type="button" onClick={() => handleAddInstruction()}>
            +
          </button>
          <button type="button" onClick={() => handleRemoveInstruction(index)}>
            x
          </button>
        </div>
      ))}
      <label htmlFor="hashtags">hashtags:</label>
      <input id="hastags" name="hashtags" />
      <button>add</button>
    </form>
  );

Hello guys! We are on day 2 of our capstone project (Jore, Hendrik, Sarah, Kevin) and have come across the following problem:

We are working on handling the submit of a form for creating new entries. (User Story)

It's about how we can best replace the index (keys), we can't do that with UUIDs because it's onChange. Instructions is an array that includes objects.

[mbosselmann]

Hi Jore, Hendrik, Sarah and Kevin,
without checking your code I would assume that the best thing would be to use the ids of your instructions as keys instead of an index. When you add a new instruction to your array with handleAddInstruction, inside the function declaration you can work create a unique id unrelated from the onChange event. As I do not know what your handleInstructionChange function does (I am surprised that you need the index as argument), it might be that this idea is not helpful for you. 🤔
Please then push your current changes on GitHub and add a link to the branch so that I can check how you handle the user input. :)

[jore-averbeck]

Thanks for your ideas! We already tried to use instructions.id as key but then the console.log says that it is undefinded.id, so it doesn't work the way it should. I also tried instructions.steps.id, but this doesn't work either

This is the handleAddInstruction:

function handleAddInstruction() {
    const newInstruction = { id: uuidv4(), step: "" };
    setInstructions([...instructions, newInstruction]);
  }

[jore-averbeck]

problem was resolved :)

[kevinldg]

Note: We looked at the wrong console log.