How to get an input field in my app?

[themebubble]

I got started with making Shopify app.

However, I'm confused in the midway.

I'm using GraphQL and understood the queries. But not sure how to make an input field for app users to put a value that will be dynamically displayed in shop. Trying to figure it out with GraphQL mutation but not sure if it's the right direction.

Imagine you'd have to build a discount app where users can put a specific amount of discount in bulk that will be visible in store. What links/tutorials should I be checking?

[olivert · Accepted solution]

Hi Mate

Are you using react?

Usually you put in a text box. Which populates a variable 

In react you would populate the state.

States in react automatically refresh the page when the value is changed with setState()

Then you assign that variable to your query parameter in your GQL query or mutations. 

[themebubble]

Thanks a lot. I think I got the idea now.

Is there any relevant tutorial/code example on this? Please send some links you if have them.

[olivert]

Nice, I would get started just familiarizing yourself with React. 

have a read of this to get you up to speed. 

https://reactjs.org/tutorial/tutorial.html

then take a swing at the shopify tutorial

https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

if you're on Mac/Linux you can run this

https://github.com/Shopify/shopify-app-cli

it's a great CLI that shopify has. there is a command 'create' that will create a starting point for you. 
really speeds up the process.