State React JS Array Issue-CodePudding

I am trying to edit user input but the click event point to the input at array 0. i wanted to be able to render only the input to be edited.

The full project is available on sandbox via the link below. I am new to react developing and struggling with state. Can someone help, please?

To see what i mean by the above, please enter some input and click add 2 different input then edit the car. Only the inputs 0 is rendered. https://codesandbox.io/s/eloquent-feather-gc88n?file=/src/header/header.js

Thank Leo

import React, { useState } from "react";

const EditSkillsForm = ({
  handleUpdateInput,
  inputs,
  handleCancelClick,
  //setCurrentSkill,
}) => {
  const [currentSkill, setCurrentSkill] = useState({});
  const [isEditing, setIsEditing] = useState(true);
  // const [ onSubmitEditing, SetOnSubmitEditing ] = useState("")

  function handleEditInputChange(e) {
    setCurrentSkill(e.target.value);
  }

  handleCancelClick = (e) => {
    setIsEditing(false);
    console.log("Cancel edit");
    //return {...prevState, isEditing : isEditing }
  };

  return (
    <>
      {isEditing ? (
        <div>
          <h4>Edit Skill</h4>
          <input
            className="mb-2"
            size="lg"
            onChange={handleEditInputChange}
            type="text"
            name="Update skill"
            placeholder="Update skill"
            value={[inputs[0]]}
          />
          <button className="btn btn-primary mx-2" onClick={handleUpdateInput}>
            Update
          </button>
          <button onClick={() => handleCancelClick()}>Cancel</button>
        </div>
      ) : null}
    </>
  );
};

export default EditSkillsForm;

CodePudding user response：

If you are editing 1 element at a time you shouldn't pass all the inputs. Only pass the object you wanna show/permit to edit.


const EditSkillsForm = ({ 
  handleUpdateInput, 
  input, 
  handleCancelClick, 
  //setCurrentSkill,
   
  })

...

<input
      className="mb-2"
      size="lg"
      onChange={handleEditInputChange}
      type="text"
      name="Update skill"
      placeholder="Update skill"
      value={input}
       />