React: How to reuse components with their own dataset? - reactjs

Question

Trying to do a dropzone upload component that allows user to tag each image uploaded using an input field..
Problem is the tags used for the first image is also loaded in the tag for the second image...
Ideally, each image should have its own "set" of tags on upload. Not sure what am I missing in terms of reusing the TagInput component.
Screenshot below to show the erroneous behavior:
Dropzone.js
const [tags, setTags] = useState({});
const addTagHandler = (aTag, index) => {
let result;
if (Object.keys(tags).length === 0) {
// if nothing, create.
result = { [index]: [aTag] };
} else {
//check index, if index exists, push to index. else, create index
if (index < Object.keys(tags).length) {
result = { ...tags, [index]: [...tags[index], aTag] };
} else {
result = { ...tags, [index]: [aTag] };
}
}
setTags(result);
};
<div className="file-display-container">
{validFiles.map((aFile, index) => (
<div className="file-status-bar" key={index}>
<div>
{previewUrl && (
<div className="file-preview">
<img src={previewUrl[index]} alt="image" />
</div>
)}
<span
className={`file-name ${aFile.invalid ? "file-error" : ""}`}
>
{aFile.name}
</span>
<span className="file-size">({fileSize(aFile.size)})</span>{" "}
{aFile.invalid && (
<span className="file-error-message">({errorMessage})</span>
)}
</div>
<TagInput
tags={tags[index]}
onAdd={(aTag) => addTagHandler(aTag, index)}
onDelete={deleteTagHandler}
/>
<div
className="file-remove"
onClick={() => removeFile(aFile.name)}
>
X
</div>
</div>
))}
</div>
TagInput.js
const [input, setInput] = useState("");
const _keyPressHandler = (event) => {
if (event.key === "Enter" && input.trim() !== "") {
onAdd(input.trim());
setInput("");
}
};
return (
<div className="taginput">
{tags &&
tags.map((aTag, index) => (
<Tag
key={aTag + index}
label={aTag}
onClickDelete={() => onDelete(index)}
/>
))}
<Input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={_keyPressHandler}
placeholder="Insert tag here"
/>
</div>
);
};

Answer 1

You are passing the same array of tags to each TagInput component. They need to be separated in some fashion.
What you need to do is create a tag array for each input. You could do this by using an object based on the file key.
Something like this should work. Just pass the key of the file to each handler so it updates the appropriate array.
const [tags, setTags] = useState({});
const addTagHandler = (key, tag) => {
setTags({...tags, [key]: [...tags[key], tag]});
};
const deleteTagHandler = (key, i) => {
setTags({...tags, [key]: tags[key].filter((_, index) => index !== i));
};
Update your tag component to use the key i like so.
<TagInput
tags={tags[i]}
onAdd={tag => addTagHandler(i,tag)}
onDelete={tagIndex => deleteTagHandler(i,tagIndex)}
/>

Answer 2

Your issue is in how you are setting the tags state. In your line const [tags, setTags] = useState([]);, you are setting tags as a single array of strings, which is being used by every consequent image with a tag, as seen in the line
<TagInput
tags={tags}
onAdd={addTagHandler}
onDelete={deleteTagHandler}
/>
where you are reusing the same tags state among all the divs in .file-display-container.
A solution for this would be to instead have an array of strings inside the state array. (tags: [["tag1", "tag2"], ["image2Tag1"], ....])
so in your old line where you set tags={tags} for each TagInoput, you would instead set is as tags={tags[i]}(the index is i in your map function).
you would need to adjust the tag handler functions accordingly. (#Todd Skelton's answer provides a fantastic way to handle it)