Tell us what’s happening:
I have been trying to get whatever I type in the markdown editor to show in the preview by passing the props, but firstly, I am unable to get the text state to change when I type in the textarea, and I am unable to get it to show in preview either. Have I made some errors in passing the props to the child component?
Your code so far
class App extends React.Component {
constructor(props){
super(props);
this.state ={text: "", }
this.handleText = this.handleText.bind(this);
}
handleText(e){
this.setState({text : e.value.target,})
}
render(){
return(
<div>
<Presentable text = {this.state.text} handleText={this.handleText}/>
</div> )
}
}
class Presentable extends React.Component {
constructor(props){
super(props);
}
render(){
return(
<div>
<h3>Editor</h3>
<textarea id="editor" onChange={this.props.handleText} value={this.props.text}/>
<div id="preview">
<h4></h4>
</div>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'));
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36 OPR/71.0.3770.449.
Challenge: Build a Markdown Previewer
Link to the challenge: