You are passing the state value wrong. It should be:
this.setState({
input: event.target.value
});
So the code looks like:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
console.log(event.target.value);
this.setState({
input: event.target.value
});
}
render() {
return (
<body>
<div class="body-div">
<form>
<textarea
class="editor"
id="editor"
placeholder="Type your code here..."
value={this.state.input}
onChange={this.handleChange}
>
{this.state.input}
</textarea>
<div id="preview" class="preview">
<h1>{this.state.input}</h1>
<h2>{this.state.input}</h2>
<a>{this.state.input}</a>
<script></script>
</div>
</form>
</div>
</body>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Live demo here: https://codesandbox.io/s/setstate-class-l32m2u
You need to bind your `onChange` event. Something like this should work:
class PaymentDetailCard extends React.Component {
constructor(props) {
super(props);
this.state = {
card: {
number: "",
userName: "",
dateWon: "",
prepayDue: "",
prepayApplied: ""
}
}
}
componentDidMount() {
this.setState({card: this.props.card});
}
getPrepayAppliedInput() {
let input = <input
type="text"
id="prepayAppliedCard"
value={this.state.card.prepayApplied}
onChange={this.change.bind(this)} maxLength="10"/>;
return <div><span>$</span>{input}</div>
}
change(event) {
this.setState({prepayApplied: event.target.value});
PaymentActions.sendRowNum(this.props.rownum);
{this.props.onPrepayAppliedChange(event)}
}
getUniqueID() {
return Math.random().toString(36).substring(7);
}
render() {
return (
<div>{this.getPrepayAppliedInput()} </div>
)
}
}
React.render(<PaymentDetailCard />, document.getElementById('container'));
[Here is the fiddle.][1]
[1]: http://jsfiddle.net/jwm6k66c/2819/