React Review: Props and State

Props

<Component propName={someFunction}/>
render(){
return(
<div className= "div-for-prop">
{this.props.propName}
</div>
)}

State

  • Interactivity like when a user clicks a button
  • Fetching data that is not available when the component is not mounted
  • Reacting to an interval of time or timeout
class InputBox extends React.Component{
constructor(){
super();
this.state = {
text:' '
}
}
}
render(){
return(
<div className= "div-for-state">
User Input: {this.state.text}
</div>
)}

--

--

--

I enjoy long naps on the couch, deep conversations about video games, and romantic dinners with anime.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building your startup with Python, React, React Native and AWS

Create Your Own Markdown Editor With React

An arrow made of paperclips

Settings — Building a SaaS using Django and Vue.js — Part 11

FormGroup reset() keeps the input with Errors after reset() the form inputs.

React Native — The Basics

Embed Tableau Dashboard in React Application 📑

A simple way to host videos for classic Esri Story Maps

how to show video upload date of Youtube in Firefox

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
404-Not-Found

404-Not-Found

I enjoy long naps on the couch, deep conversations about video games, and romantic dinners with anime.

More from Medium

Getting to Know Hooks in React: useContext()

3 React Router Hooks: useHistory, useNavigate, useParams

Koa with React

React/ State and Props