How to identify input and output elements in React JS? - reactjs

Question

I have Here React JS Code. with 2 input areas. and 2 output areas. How to link 1 to 1 and 2nd to 2nd.
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.md = new Remarkable();
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Hello, **world**!' };
this.md2 = new Remarkable();
this.handleChange2 = this.handleChange2.bind(this);
this.state2 = { value: 'Hello, **Brad Pitt**!' };
}
handleChange(e) {
this.setState({ value: e.target.value });
}
handleChange2(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
return { __html: this.md.render(this.state.value) };
}
getRawMarkup2() {
return { __html: this.md2.render(this.state2.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">
Enter some markdown
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<textarea id="markdown-content2"
onChange={this.handleChange2}
defaultValue={this.state2.value2}
/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup2()}
/>
</div>
);
}
}
ReactDOM.render(<MarkdownEditor />,
document.getElementById('markdown-example')
);
Is it "Value" that can be changed or "state"? Here only Text area input is used but I do want to use other inputs such as radio, numbers and checkboxes. Moreover Where do I perfrom Arithmatic calculations in code above

Answer 1

You can only use one this.state in your component. It's a javascript object so you can have your two keys inside it:
this.state = { input1: "", input2: "" }
Then, to update the values, you can call this.setState for each key:
handleChange(e) {
this.setState({ input1: e.target.value });
}
handleChange2(e) {
this.setState({ input2: e.target.value });
}
this.setState will update the state by merging the previous state with the object you send him ({input1: e.target.value}) that will cause a rerender of you component with the updated value.
Now in your <textearea>, you must use "value" instead of "defaultValue" and read the value directly from the state i.e. {this.state.input1} for the former and {this.state.input2} for the latter.
This is what we call a controlled component in React.

Answer 2

<input value = {this.state.formValue}>
And you can get or set input's value in other functions of component