0

I have in my .js a React variable this.status.result which holds my value (it's refreshing and changing values.

I want to put it in my html code, but I have no idea how to do it. I want something like this:

    <div id="demo-container"></div>
    <script src="bundle_test.js" type="text/javascript" charset="utf-8"></script>

    <form method="post">
    <input type="text" value=this.status.result>
    <input type="submit">
    </form>

Is there any easy solution? I know I can create a form with React, but for my project won't work.

EDIT: .js file has more than 25k lines.

Improve this question
5
  • Does this one value={this.status.result} work ? Commented Aug 16, 2017 at 7:49
  • Works like plain text Commented Aug 16, 2017 at 7:57
  • So what are you expecting? result hold an HTML and you want to re-render it inside input? Commented Aug 16, 2017 at 8:04
  • It is a qr code scanner, this.status.result holds a scanned value and I want to put this value into input (there are more than one input in multiple forms) Commented Aug 16, 2017 at 8:08
  • I think you have to add more details about your problem. result is an array, and how many input you want to render? What does it look like if you pass like others suggested value = this.status.result and what is your expect result? Otherwise it is very hard for us to guess your target. Commented Aug 16, 2017 at 8:26

3 Answers 3

Reset to default
1

You should put { } when using variables in react js components:

  <input type="text" value={this.status.result}>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Works like plain text
can you paste whole code here i.e. react component code please
okay. All I want you to check that this exists in your code above and <input> should be inside render.
1

To be able to use the value of props in your html, you need to wrap the same in brackets like {this.props.propName}. For your code just make this change:

<div id="demo-container"></div>
<script src="bundle_test.js" type="text/javascript" charset="utf-8"></script>

<form method="post">
<input type="text" value={this.status.result}>
<input type="submit">
</form>
Improve this answer

Comments

0

Inside the render function of your component:

render() {

    const result = this.status.result;

    return (
        <form method="post">
            <input type="text" value={result}>
            <input type="submit">
        </form>
    )
}
Improve this answer

2 Comments

Is it the only solution? It doesn't suits for me because of having multiple forms in my code which uses this.status.result so creating multiple forms in .js (instead in html) is not what I want
Thats the react way to render a component... you dont need a js file for every form, just render them as an array of forms.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.