1

import React from 'react';
import './App.css';


interface Input{
  input?:string;
}



class App extends React.Component<Input, any> {
  constructor (props:any) {
    super(props);
    this.state = {
      input: ''
    }
  }

  onEventChange (e:any) {
   this.setState({ 
    input: e.target.value
    })

  }
 render() {
  return (
    <div className="App">
     <h1>Weather app</h1>
     <input type="text" onChange={this.onEventChange.bind(this)} />
     <h1>{this.state.input}</h1>
    </div>
  );
 }
}

export default App;

What I am currently trying to do is validate the users Input. I am not sure how to move my interface into the state. Is this possible? I could not find a answer anywhere for this.

Adrian Ibarra
  • 11
  • 1
  • "I am not sure how to move my interface into the state." The generics are `React.Component`. Right now you are using `Input` as the type for the `props` but it doesn't seem like you actually need props. I think you want `React.Component<{}, {input: string}>`. We don't want `input` to be optional in state because it is always set. – Linda Paiste Feb 28 '21 at 05:13
  • 1
    `e.target.value` on an input will always be a `string`. I would recommend that you learn with function components. Class components still work but they are "outdated". Having to explicitly `bind(this)` is definitely outdated. Just use an arrow function! Revised code: https://tsplay.dev/BmxQZW – Linda Paiste Feb 28 '21 at 05:21

0 Answers0