CODEWITHSUNDEEP
javascripthtmlreactjs
user8357125
user8357125

Reputation:

React variable into html input

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.

Upvotes: 0

Views: 6120

Answers (3)

Vanojx1
Vanojx1

Reputation: 5574

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>
    )
}

Upvotes: 0

Manu
Manu

Reputation: 10934

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>

Upvotes: 1

Umesh
Umesh

Reputation: 2732

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

  <input type="text" value={this.status.result}>

Upvotes: 1

Related Questions