Markdown Previewer - Child Editor Component Doesn't Work

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

Hello there,

You need to remember, each component has its own state, props, and methods.

class Editor extends React.Component{
  render() {
    return(
      <div>
        <div>
          <h3>Child Editor</h3>
          <textarea onChange={this.handleChange} value={this.props.input}></textarea>
        </div>
      </div>
    )
  }
}

In this Editor component, you have not defined what props are. So, you cannot access input. Also, there is no handleChange method in the Editor component.

Remember, the this refers to the component (in these cases).

Now, it is possible to use a method from a parent component, but it requires passing it as a prop, and you need to handle state very well.

Hope this helps

Hi there,
Thanks for your feedback. I was having one of those days yesterday! Of course, I had forgotten to pass down the method handleChange to the child component like thus:

<Editor
          input = {this.state.input}
          handleChange = {this.handleChange}
          />

Which meant I got an error saying that props were ‘undefined’ when I tried to refer to props here:

<textarea onChange={this.props.handleChange} value={this.props.input}></textarea>

All better now! I’ll hopefully have a better day today. Thanks again for the input. It’s much appreciated.
LT