React/Redux Update Textarea

JavaScript
1

Hello, everyone. I’m playing around with Redux for the first time and I’ve run into a bit of a problem. I have two textareas and I want the second one to update to match whatever is typed into the first one. I can’t get it to happen though. It seems that the state is being updates and it even rerenders correctly OUTSIDE of a textarea but the textarea’s value doesn’t update. Any helpful hints? I’ll past the code below along with a CodePen link. Thank you!

let defaultText = {
  input: "Hello world!",
  output: "Goodbye, world!"
}

class TextBox extends React.Component{
  handleChange(event){
    this.props.convert(event.target.value)
  }
  
  render(){
    return(
    <textarea onChange={event => this.handleChange(event)}>{this.props.text}</textarea>
      )
  }
}

class App extends React.Component{
  render(){
    return(
    <div>
        <TextBox text={this.props.input} convert={this.props.convert}/>
        <TextBox text={this.props.output} />
        {this.props.output}
        {this.props.input}
      </div>
    )
  }
}

const actions ={
  convert: (input) => {
    return{
      type: 'CONVERT',
      input: input
    }
  }
}

function reducer(state = [], action){
  switch (action.type){
    case 'CONVERT':
      return {
         ...state,
        input: action.input,
        output: action.input
      };
      break;
    default:
      return state;
  }
}

const store = Redux.createStore(reducer, defaultText, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

function mapStateToProps(state){
  return{
    input: state.input,
    output: state.output,
  }
}

function mapDispatchToProps(dispatch){
  return {
    convert: function(input){
      dispatch({type: 'CONVERT', input: input})
    }
  }
}

const Container = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App);

ReactDOM.render(<ReactRedux.Provider store={store}><Container /></ ReactRedux.Provider>, document.getElementById("root"))

CodePen: https://codepen.io/donthatedontkill/pen/eQKbao?editors=0010

2

You’re not setting the value of the text area, that’s how you get/set the text in it using React, it’s made consistent with other form elements.

1 Like
3

This did it! Thank you!

1 Like