CODEWITHSUNDEEP
javascripthtmlcssreactjsredux
matt
matt

Reputation: 11

Hide input value attribute from the dom

For some reason when react is updating the input value, the value is showing up in the DOM.
At the moment I'm using this code:

< input type="password" id="password" value="anytext" />

Is there any way to have the text in the value property hidden for security reasons? Maybe something like this:

< input type="password" id="password" value />

I'd appreciate everyone's input.

Upvotes: 1

Views: 1404

Answers (1)

dave
dave

Reputation: 64687

It looks to me like this behaviour does not happen:

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { password: 'test', test: '' }
        setInterval(function() {
            document.getElementById('test').innerText = 'ATTRIBUTE: ' + document.getElementById('password').getAttribute('value');
        }.bind(this), 200);
    }
    render() {
        return <div><input id="password" type="password" value={this.state.password} onChange={(e) => this.setState({password: e.target.value})} /><pre id="test">ATTRIBUTE: {this.state.test}</pre><pre id="value">VALUE: {this.state.password}</pre></div>
    }
}

ReactDOM.render(
  <Demo />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

Upvotes: 1

Related Questions