Hi Folks,
I’m just preparing to start the Markdown Previewer project. As a start I thought I’d show a preview area that reflects what is typed in a <textarea>
as it is being typed.
My problem is that I don’t seem to be able to type anything in the <textarea>
when it is defined in a child component. It works fine when defined in the parent component which has me kind of stuck.
This is my code so far:
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
}
/* Bindings */
this.handleChange = this.handleChange.bind(this)
}
/* Methods */
handleChange(event){
this.setState({
input: event.target.value
})
{console.log("test handleChange", this.state.input)}
}
render(){
return(
<div>
<h3>Parent Editor</h3>
<textarea onChange={this.handleChange} value={this.state.input}></textarea><br />
<span>{this.state.input}</span>
{/* call child components and pass props */}
<Editor input = {this.state.input} />
<Preview input = {this.state.input} />
{console.log("test MyApp component", this.state.input)}
</div>
);
}
}
class Editor extends React.Component{
render() {
return(
<div>
<div>
<h3>Child Editor</h3>
<textarea onChange={this.handleChange} value={this.props.input}></textarea>
</div>
</div>
)
}
}
class Preview extends React.Component{
render(){
return(
<div>
<div>
<h3>Preview Area</h3>
<div>
<span>{this.props.input}</span>
{console.log("test preview", this.props.input)}
</div>
</div>
</div>
)
}
}
// Render the components to the DOM
ReactDOM.render(<Presentational />, document.getElementById("app"));
Here’s a link to the pen: MD Draft CodePen
Can anyone spot what the problem is here please?
Any help would be much appreciated.
Thanks in advance.
LT