Pass event handlers to child components while incorporating lifecycle methods

JavaScript
1

I’m trying to incorporate the lifecycle method componentDidMount into my markdown previewer. At the moment I have one stateful class component where the handleChange method is housed. The Editor component is separate:

class App extends Component {
	
	constructor(props){
		super(props);
		this.state = {
			value: OnLoad
		};
		this.handleChange = this.handleChange.bind(this);
	}
	handleChange (event) {
		this.setState({
			value: event.target.value
		});
	}
  	render() {
	  const title="React Markdown Previewer";
	  const subtitle="Edit textarea to change preview";
    return (
		<div className="contents">
			<Title title={title} subtitle={subtitle}/>
            <Main value={this.state.value} handleChange={this.handleChange}/>			
		</div>
    );
  }
}

export default App;

//separate file
class Editor extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
    return ( 
    <div className="editor-box" style={style}>
        <h2 style={style.heading}>Type markdown here</h2>
        <textarea id="editor" className="resizeable" style={style.box} rows="27" onChange={this.props.handleChange} >{this.props.value}</textarea>
    </div>
    
    );
    }
}

export default Editor;

I don’t know to pass the event listener change as props to Main and then Editor if it is added in componentDidMount. I have tried the following code:

componentDidMount() {
        const editor = document.getElementById('editor');
        editor.addEventListener('change', this.handleChange);
    }

in both the App and Editor components but both fall apart when I remove the onChange declaration from the render methods.
If possible I’d like to have the Editor component as a functional component as I had it before trying to add the lifecycle method.

2

You may want to use refs in this case.
Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an element, but without using props or re-rendering the whole component.

I got a question. Why don’t you use onChange attribute and reference the function via props down to it?

Like

<textarea value={this.state.value} onChange={this.handleChange} />
3

That’s how I built it in the first place and it works fine, but I wanted to see if I could use any lifecycle methods simply for the practise of using them, however I’m getting the feeling that this is not an appropriate use of lifecycle methods.

4

I am at work and I am from phone. Such a pain to use the forum, sorry for typos. React is using JSX quite intelligent when it comes to event listening.

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

This is the syntax.

5

Thanks, as I said, this is how I coded it originally. I’ll restore it to this version and abandon the lifecycle methods in this case.

6

I don’t manage to understand why you want to program logic for your component in a life cycle method. Logic should be defined in the process of building your JSX objects/elements/components .
This is React philosophy .

7

I’m new to React and just experimenting. Lifecycle methods are a pretty foreign concept as I’ve only really gone through them in the fcc exercises and the React docs. I see the mistake I made in my thinking, if I am correct componentDidMount is a good place to add event listeners which DIRECTLY manipulate the DOM, which in this case is unnecessary as I can just use the onChange attribute without any lifecycle methods.

8

I know what you mean. I struggled the most with understanding life cycle methods. I use them only if I don’t have alternative like componentWillReceiveProps(). I had situations when I couldn’t do it without it, otherwise trying to keep it simple and avoid. I know is not the best approach. Ideally you fully learn and understand what is the purpose of each of them and when is appropriate to use. Good luck.

9

Thanks for the feedback, good luck to you too.