CodeNewbie Community

loading...

Text Box-> Get Posted

jatin profile image JatinBhargava ・1 min read

How to make a text box and then when we write in it, it gets posted down like #Twitter. In #react web app.

Discussion (4)

pic
Editor guide
Collapse
michaelcurrin profile image
Michael Currin • Edited

You've got two problems to solve.

Handling text input for fields in a form.

Have a look at TextSample in the JS file and use the live demo.

github.com/MichaelCurrin/react-fro...

Repeat that so you can capture multiple values and display them so you know it is working.

Are you trying to turn abc into #abc? I would do that in JS and then put the result in the JSX. Or you can do <p>#{ myText }</p>.

Collapse
michaelcurrin profile image
Michael Currin • Edited

The second to solve is not specific to React but is about Twitter.

I assume you actually want to post to Twitter? I don't what "posted down" is.

I'd say solve this Twitter issue without React until you know how it works and and then add React to it.

It is possible to build up a URL of parameters such that when you go to the URL, it prefills a tweet box with a message which the user can edit and then tweet.

Tweet Intent Documentation

Note you don't handle any signing in. You just give the user a link to click and they go to Twitter and tweet and then come back.

For example

https://twitter.com/intent/tweet?url=https%3A%2F%2Fmichaelcurrin.github.io%2Fbadge-generator%2F&text=Badge%20Generator%3A%20Magically%20generate%20custom%20badges%20that%20you%20can%20paste%20in%20your%20docs&hashtags=vue,github,documentation,readme,code

Makes a tweet message like this

Badge Generator: Magically generate custom badges that you can paste in your docs 
https://michaelcurrin.github.io/badge-generator/ 
#vue #github #documentation #readme #code
Enter fullscreen mode Exit fullscreen mode

And then all you have to do once you have that URL generated is put it on a button on your site that says Tweet.

e.g. this is in markdown and loads an SVG for a neat Twitter button.

Tweet

[![Tweet](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fmichaelcurrin.github.io%2Fpython-twitter-guide%2F)](#)
Enter fullscreen mode Exit fullscreen mode

Replace # with the URL created before.

Update: the jmafe5 doesn't seem to load correctly on this site but you can check here

github.com/MichaelCurrin/badge-gen...

Collapse
jatin profile image
JatinBhargava Author

Oh no no!! I used # just as a slang not like # + "text". I just want a text box then when someone writes something in it it's gets posted as we do in write a post after click it gets posted. Down under means like in facebook.

Collapse
michaelcurrin profile image
Michael Currin • Edited

It is easy to make a button that takes the user to Twitter with a prefilled message. As I discussed and Twitter docs recommend

developer.twitter.com/en/docs/twit...

If you want more control (like the user doesn't leave your app, or they upload an image) it gets a lot more complicated.

You need to make a dev application from your twitter profile which can take a few days michaelcurrin.github.io/python-twi...

And it is not safe to use your Twitter credentials in a frontend app because of abuse so then you need an API Node server or Lambda (ie something not running on the browser) so you can tweet on behalf of the user while keeping your secrets secret.

If you only have a frontend React app with no Node server, then the effort to set up one just to Tweet for people may not be worthwhile.