Problems with implementing React Select in the database

[PeetThesing]

Hi!

For the tags in our form we implemented react-select, a library to be able to select multiple options and create new tags. At first, everything works just like we need it. But I have a problem with implementing the connection to the database.

Here is the link to the pull request.

data.tags returns undefined. In the CreateSelect component onCreateOptions makes sure that the new entered Value appears in the input field.

How do I get the new tags to the database? I thought it should work like the link-array of objects, but we're a little bit stuck.

We appreciate any ideas.

[doemser]

First thing I noticed is, that you are not setting the state you want to use anywhere:
I can only find this logic:

    setTags([...tags, { value: "", label: "" }]);

I dont know the library you are using yet, but it is possible that the tags work as expected, but you are not receiving them in your state yet

[doemser]

I came up with a small prototype that shows how to handle this use-case in an isolated way, maybe this can help you already:

https://codesandbox.io/s/creatable-prototype-mxsvrt?file=/src/App.js

[PeetThesing]

Thanks for the prototype!

That helped with implementing the Library correctly, but not so much with the connection to the database. After today the defaultTags (defined now in the _app.js) are not undefined anymore and return the one tag which we entered directly in the database.

When I submit a new snippet, I can see in my node-Terminal, that the POST-methods sends the new tag, but it still does not appear in our data.

We have some problems at the moment with rendering new data (I need to go to localhost 3000 again to see the new snippets, neither the back link nor clicking on the header leads to all snippets anymore). Can that be the cause of our database problem here?

[PeetThesing]

Fixed this morning by the magical presence of @ Roland.