<p>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: </p> <pre class="brush:php;toolbar:false;">Uncaught TypeError: tags.join is not a function</pre> <p>Here is the code snippet associated with this error: </p> <pre class="brush:php;toolbar:false;">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> ) }</pre> <p>Also tried the following and got the error message that n.map is not a function: </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Using the following code, I can see the data in the console: </p> <pre class="brush:php;toolbar:false;">tags.forEach((element) => { console.log(element); });</pre> <p><br /></p>

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