Uncaught TypeError: tags.join is not a function.

Question

I have a page with multiple tags stored in an array. I want to edit the page and when trying to load the tag array into TagsInput I get the following error message:

Uncaught TypeError: tags.join is not a function

Here is the code snippet associated with this error:

import { TagsInput } from "react-tag-input-component";

const UpdatePage = () => {

  const [tags, setTags] = useState("");
  const tagsString = tags.join(", ");

  // Fetching tags from backend and storing into setTags
  setTags(<some_code_for_axios_get>)

  return(
    <div>
        <FormControl fullWidth margin="normal">
          <TagsInput
            label="Tags"
            size="small"
            value={tagsString}
            onChange={setTags}
            placeHolder="Type your tag and press enter"
          />
        </FormControl>
    </div>
 )

}

Also tried the following and got the error message that n.map is not a function:

<div className="tags">
  {tags.length
    ? tags.map((type, i) => (
      <TagsInput
        key={i}
        label="Tags"
        size="small"
        value={i}
        onChange={setTags}
        placeHolder="Type your tag and press enter"
      />
      ))
    : <TagsInput
        label="Tags"
        size="small"
        value={tags}
        onChange={setTags}
        placeHolder="Type your tag and press enter"
      />
    }
</div>

Using the following code, I can see the data in the console:

tags.forEach((element) => {
    console.log(element);
  });

Answer 1

Tags are not an array, they are a string, according to this line:

const [tags, setTags] = useState("");

No matter what happens setTags(<some_code_for_axios_get>), the first render, tags will be ""