How to Delete "Input type File textfield"

Question

What i am trying to achieve is that i want to allow users to upload as many or limited files. To add he can always add the "Input file field".

Everything works correctly but when i try to delete it. It does not delete to "Input field" of SPECIDIC INDEX or Specific ID provided but it deletes the last field always.

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [fields, setFields] = useState([{ files: null }]);

  function handleChange(i, event) {
    const values = [...fields];
    values[i].files = event.target.[0];
    console.log(values);

    setFields(values);
  }

  function handleAdd() {
    const values = [...fields];
    values.push({ value: null });
    setFields(values);
  }

  function handleRemove(i) {
    const values = [...fields];
    values.splice(i, 1);
    setFields(values);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <button type="button" onClick={() => handleAdd()}>
        +
      </button>

      {fields.map((field, idx) => {
        return (
          <div key={`${field}-${idx}`}>
            <input
              type="text"
              
               defaultValue={field.files || ""}
               onChange={(e) => handleChange(idx, e)}
                />
            <button type="button" onClick={() => handleRemove(idx)}>
              X
            </button>
          </div>
        );
      })}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Wael BH · Accepted Answer · 2021-03-17 20:31:23Z

1

The problem is the map KEY you should use a specific id instead of the index or the file object you can find below the example with the uuid package.

EXAMPLE :

import { useState } from "react";
import "./styles.css";
import { v4 as uuidv4 } from "uuid";

const App = () => {
 const [fields, setFields] = useState([{ id: uuidv4(), files: "" }]);

   function handleChange(i, event) {
     setFields(
      fields.map((input) =>
    input.id === i ? { ...input, files: event.target.value } : input
    )
    );
  }

  function handleAdd() {
  const values = [...fields];
  values.push({ id: uuidv4(), files: "" });
  setFields(values);
  }

  function handleRemove(idx) {
  setFields(fields.filter((_, i) => i !== idx));
  }

  return (
   <div className="App">
   <h1>Hello CodeSandbox</h1>

   <button type="button" onClick={() => handleAdd()}>
    +
   </button>

   {fields.map((field, idx) => {
    return (
      <div key={field.id}>
        <input
          type="text"
          value={field.files}
          onChange={(e) => handleChange(field.id, e)}
        />
        <button type="button" onClick={() => handleRemove(idx)}>
          X
        </button>
      </div>
    );
  })}
</div>
 );
 };
 export default App;

answered Mar 17, 2021 at 20:31

Wael BH

513 bronze badges

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

2 Comments

Muhammad Hassaan Ather Over a year ago

Thanks a lot that worked with the flow... :)

Wael BH Over a year ago

Glad to help :)

Collectives™ on Stack Overflow

How to Delete "Input type File textfield"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related