React Components, State and Props

Components

class <ComponentName> extends Component {
render() {
return ( //Your Code Goes Here )
}
}
Syntax: <ComponentName />
  • Methods defined here must be prepended with the keyword “this” when invoked in other parts of our code via
{ this.functionName() } || { this.functionName} in an event
  • Use arrow functions so these methods are implicitly bound to their class of origin

Props

  • Think of props as space-separated attributes of JSX child components
Syntax: < ChildComponentName propName = { propValue} />
  • A prop’s value can be any data type: string, number, boolean, object, function, etc
  • A prop’s value is accessible within the ChildComponentClass via
Syntax: { this.props.propName }
  • We define default props outside of the component class
ComponentClassName.defaultProps = { propName: defaultPropValue }

State

constructor() { 
super()
this.state = { stateKey: stateInitialValue }
}
Syntax: { this.state.stateKey }

Updating State

  1. Define the change you want to make to the stateValue
  2. Update the state object
Syntax: this.setState( { stateKey : stateNewValue } )
this.setState(objectRepresentingTheChange, callbackFcn)

--

--

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