I am working on making a feature where user would be able to select a particular emoji from
<EmojiPicker /> component exported from **'emoji-picker-react'**.
But the problem is instead of rendering the actual emoji inside of the MUI's TextField, it is rendering a string of [object Object].
I know, that MUI's TextField behaves this way only, as it is expecting a string, so it is converting the EmojiData into a string and thus getting it rendered as [object Object].
But, my question is, how could I dispose this problem and convert the data (the selected emoji) using emoji-picker-react into the emoji only.
Is there any other way my emoji could be displayed as emoji ( instead of [Object of type object]? ).
I have tried multiple input fields including the basic <textarea /> and <input /> from basic HTML, but all they are returning the [object Object] only.
I am attaching what I have done so far to accomplish the goal inside of the below mentioned sandbox -
Please check this below mentioned sandbox for better grasp of my situation -
https://codesandbox.io/s/angry-davinci-8d3p7v?file=/src/App.tsx
I would like you to check it and correct, (either by applying a little different approach) or any way around, such that the textfield would be able to show the emoji selected.
Also please tell me, if I have to select the words and emojies together, how am I going to do this (inside of react useState()) ?
I would highly appreciate your suggestions/corrections .
Thank you in advance !
Related
I'm using Material UI with React and I'm trying to build an input field that can display react components mixed with text. The reason is to be able to scan the text in the input field with a regex to find "variables". For example 'Hello, my name is $name'. I want to replace the variable with a material UI chip component.(Link)
To clarify how I want it to look like.
I have looked around for libraries and I've found that material-ui-chip-input does something similar but it doesn't look to be customisable to solve my issue.
Is there a way to render a react component in an input field or should I rethink how I should go about doing this? Any help is appreciated!
I'm new to react native.
I need to create the front-end part of an app used to manage products. In this app, a specific screen lets users add a "new product".
I've almost finished the UI part, but I now need to show errors to the user when something is wrong with its input (a missing product ID, a description with less than 10 characters, etc.).
Here's my objective: when the user clics the "publish" button, I check all the inputs. If the input is ok -> nothing happens, if the input contains an error -> the field turns red.
To achieve this, I need to work with states. Here should be an example for the title:
style={[style.inputText, {color: this.state.titleColor}]}
And I can change the state.TitleColor if something is wrong with the title input.
The problem is that I don't want to create a specific state for each input (titleColor, IDColor, descriptionColor, etc.).
How can I do a common state for inputs that are correct, and an other state for inputs that are wrong? I thought of using an array (with inputCorrect:[] ;
InputWrong:[]), but I do not know exactly how to deal with it.
Can someone help me? Thanks.
I'd recommend using a form library to help you with state and validation. I personally like formik, but I've heard good things about react-final-form as well (both are compatible with React Native).
Libraries like this make it easier to manage validation and input state, because they manage the state for you and tell each of your fields whether they're valid or not (passing appropriate error messages if needed).
It's still up to you to build the UI that displays the errors, but having the logic taken care of is a huge help. The formik docs have some good examples showing you how you would achieve your goal of changing a field color to red if that field has errors.
There is a bit of a learning curve to understand how to use these libraries well, but it's well worth it in my opinion.
I'm not quite sure exactly what to search for or where exactly to start, but I'm trying to see if it's possible to have a customized search box for multiple GET queries simply using jQuery, JS, HTML and CSS.
The user would first type in something which will prompt the red box to show (key) and it would autofill with a listed default given the first few characters they typed. Then upon pressing enter or tab, they would be allowed to fill in the answer gray box (value). Then after, they can either choose to submit or put in another key / value.
Is there a jQuery library that already has this implemented, and is this even possible? I thought about putting input boxes inside the input search box and using jQuery to hide and show them depending on what they type, but is that the best way?
I'd like to do this without comprehensive framework / library like Angular and React.
Thanks in advance!
You must handle it with one of JavaScript freamworks like Vue.js, React.js or Angular.js
I have a notepad file of about 10,000 words. I can export them as csv or tab separated values as required. Is there a way for my words to appear as suggestions in a textbox (input type text)?
This word work in the same way as google.
In HTML5 you have the datalist element which gives you a kind of autocomplete feature. Although I'm not really sure about what you want an answer to, for example it is probably not that efficient to put 10 000 words inside the datalist element.
You can use jquery along with some plugin for maximum cross-browsing capability.
Here is an example of what you are trying to achieve http://jqueryui.com/autocomplete/
Click on the vew source link on the page to see how it is done.
Edit:
Since you are using a lot of elements, why not creating an ajax request after the text change to load the elements you want and then stream them into a div right under the text box? This will make you more in control of what the user is seing and it will work on all browsers.
I'd like to get some input from the user:
keywords = prompt("Input keywords separated by commas", "");
I have many various strings stored in an SQLite database that could suggest the user what to type.
Let's say you have an array or list of these strings. How would you code this hinting in Javascript? Are there some functions or code snippets for this functionality?
I'd like it to work similarly as here. When you start typing you get hint with possibilities. There is only one disadvantage, that you can't input more strings separated by commas. Here is this feature working with more strings.
Is prompt() function suitable for this purpose? You can use another way of getting user input.
Thank you
You cannot tweak the native prompt() javascript method.
I know you did not tag with jQuery but would be way easier to use a library to implement such a behavior.
You'll have to build your own dialog system using maybe jQuery UI Dialogs. They have an option to make it modal so the UI is blocked until the dialog is closed.
jQuery UI Dialog will not block javascript execution though like prompt does. You might need to be able to execute code when the dialog is closed. This answer show a way to implement that easily.
Finally, the jQuery UI Autocomplete provides an example on how to use it for multiple values in the same input. They use a comma-separator but I guess you could modify the example to work with whitespaces: jQuery UIAutocomplete Multiple Values
You can't really use any custom functionality with prompt().
You'd be better off creating an <input type="text"/> and hooking the whole thing up to a button, making the data get submitted whenever a use clicks it, or presses enter. Then code it to fetch an autosugges value whenever the user types in a new character.
You should take a look at jQuery UI's autocomplete component (it works with multiple strings as an input as well). You would also need to set up a server-side script that will take a possibly incomplete string as an input and output a possible list of matches back to the browser.