Hello everybody!
I am trying to build the Markdown Project by combining react with redux and somehow my textarea field where I enter the Markdown is out of sync with the Preview field. (I haven’t added the marked library yet which I am planning to after fixing this problem)
As you can see in this gif that the div element below the textarea field is always one letter behind the actual input of the textarea field.
My code is:
Reducer
import {SHOW_PREVIEW} from './actions'
debugger;
const editorReducer = (state = "", action) => {
switch (action.type) {
case SHOW_PREVIEW:
return action.payload
default:
return state;
}
}
export default editorReducer
Action
export const SHOW_PREVIEW = 'SHOW_PREVIEW'
export const showPreview = (text) => {
return {
type: SHOW_PREVIEW,
payload: text
}
}
Texteditor for entering text
import React, { Component } from 'react';
import './App.css';
import {showPreview} from './actions'
import {connect} from 'react-redux'
class TextEditor extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
}
}
onTextAreaChange(event) {
this.setState({
text: event.target.value
})
this.props.showPreview(this.state.text);
}
render() {
return (
<div>
<textarea id="editor" onChange={this.onTextAreaChange.bind(this)} value={this.state.text}/>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
text: state.editor}
}
export default connect(mapStateToProps, {showPreview})(TextEditor)
(Previewer to preview text out of textarea element)
import React, { Component } from 'react';
import './App.css';
import {connect} from 'react-redux'
class Previewer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div><div id="preview" >{this.props.text}</div></div>
)
}
}
const mapStateToProps = (state) => {
return {
text: state.editor}
}
export default connect(mapStateToProps)(Previewer)
I would apreciate any help regarding this matter:)
Thanks !