Wassup all, hope everyone is enjoying the new year. 2019 feels like such a crazy number, we are sooo past that Back to the 2015 fantasy world! Future Gonna do some snippets since I’m using it the most at work these days. I still do think that Vue is superior, especially for this example. react Aim Grab the value of the input box in real time and store it to be potentially used later. Setup If your not sure about the initial setup for react, check out my blog post on using . create-react-app I stripped off all the defaults and put this in to check its working. Don’t forget to run npm start` to start your page on localhost/3000. It should pop up automatically. App.js looks like React, { Component } ; ; {
 render() { ( <h1 className="element">hello this is the initial setup!</h1> );
 }
} App; import from 'react' import './App.css' class App extends Component return < = > div className "App" </ > div export default I added a lil centering css in App.css .App {
 text-align: center;
 height: vh;
 width: vw;
 display: grid;
}
.element { : inline-block;
 margin: auto;
} 100 100 display Should look like this With this file structure Make the text box React, { Component } ; ; {
  render() { ( <div className="element">
          Tell me your darkest secrets! <input type="text" />
        </div>
      </div> import from "react" import "./App.css" class App extends Component return < = > div className "App" );
  }
}
export default App; Should make it look like this State Logic Aight, so now we need to have the value of the text box be stored somewhere. In react’s case we should use this.state= {value: ''}` which uses a key/value pair hash to store our data. We set the value attribute of the text box to refer to that value which is this.state.value. React, { Component } ; ; { () { (); .state = { : };
  }
render() { ( <div className="element">
          Tell me your darkest secrets!
          <input type="text" value={this.state.value} />
        </div>
      </div> import from "react" import "./App.css" class App extends Component constructor super this value "" return < = > div className "App" );
  }
}
export default App; Right now, we can’t actually type anything in there because the value of the text box is set to ‘ ’ in this.state.value so we have to add some code to update it to whatever the user types. We add in a custom function to that runs on every change in the text box to update the value of it. When you update the state in react, we use this.setState = {key: value} and rewrite the state hash. handleTextboxValue = { .setState({ : event.target.value });
  }; => event this value and in the tag add this attribute input <input
            type= value={ .state.value}
            onChange={event => .handleTextboxValue(event)}
          /> "text" this this We can actually remove from the attribute as its explicit. The final code should look like this; event React, { Component } ; ; { () { (); .state = { : };
  }
handleTextboxValue = { .setState({ : event.target.value });
  };
render() { ( <div className="element">
          Tell me your darkest secrets!
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleTextboxValue}
          />
        </div>
      </div> import from "react" import "./App.css" class App extends Component constructor super this value "" => event this value return < = > div className "App" );
  }
}
export default App; If you install the react app chrome extension, you should be able to see the state updating live. (Photo by on . That feeling you get when something works!) Ian Parker Unsplash (That feeling you get when something works!) Hopefully this is helpful and clear, I’ll try and make another snippet next week. Have a great week guys!

Super

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Quick Snippets — Grabbing input data with React

Too Long; Didn't Read

Companies Mentioned

Puyan Wei

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Quick Snippets — Grabbing input data with React

Too Long; Didn't Read

Companies Mentioned

Puyan Wei

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES