REACT: Translator Component | Setting & Accessing State

Question

I'm working on creating a REACT component that "translates" a number by essentially taking the user's input and accessing the translation with simple key value pairs. Everything works except for my handleTranslate method. Console log for this method is giving me undefined.

 class MyComponent extends React.Component { constructor(props) { super(props); this.state = { input: '', one: 'uno', two: 'dos', three: 'tres', four: 'cuatro', five: 'cinco', six: 'seis', seven: 'siete', eight: 'ocho', nine: 'nueve', ten: 'diez', answer: '' }; this.handleChange = this.handleChange.bind(this); this.handleTranslate = this.handleTranslate.bind(this); }; handleChange(state) { this.setState({ input: event.target.value }); } handleTranslate (state) { var x = state.input; this.setState({ answer: state.x }); } render () { return( <div> <h3>Enter an English number between one and ten and watch the translation render below</h3> <input value={this.state.value} onChange={this.handleChange, this.handleTranslate}/> <p>{this.state.input}</p> </div> ); } }; ReactDOM.render(<MyComponent/>, document.getElementById('view'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='view' />

Answer 1

Use one handled function with event would be fine

 class App extends React.Component { constructor(props) { super(props); this.state = { input: "", one: "uno", two: "dos", three: "tres", four: "cuatro", five: "cinco", six: "seis", seven: "siete", eight: "ocho", nine: "nueve", ten: "diez", answer: "" }; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ input: event.target.value }); this.setState({ answer: this.state[event.target.value] }); } render() { return ( <div> <h3> Enter an English number between one and ten and watch the translation render below </h3> <input value={this.state.value} onChange={this.handleChange} /> <p>{this.state.input}</p> <p>{this.state.answer}</p> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>