React Chat

Joel Ross

React Chat: Components

Joel Ross

Let's make a chat app!

Conditional Rendering

You can use control logic (if statements) to specify whether or not a component should be rendered.

https://reactjs.org/docs/conditional-rendering.html

function ConditionalPanel(props) {
  //assign element to show to variable
  let thingToRender = null; //null element will not render
  if(conditionOne){ //based on props or state
    thingToRender = <OptionA />
  } else if(conditionTwo) {
    thingToRender = <OptionB />
  } else if(conditionThree) {
    return null; //show nothing!
  }
    
  //keep return statement as simple as possible!
  return (<div>{thingToRender}</div>);
}

function ConditionPanel(props) {
  //can use inline expressions via shortcutting. Not recommended
  return (
    <div>
      {conditionOne == true && <OptionA />}
    </div>
  )
}

React Chat: Adding Messages

Joel Ross

React Chat: Changing Users