React Chat
Joel Ross
React Chat: Components
Joel Ross
Let's make a chat app!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/377018/images/9547763/discord-chat.png)
Conditional Rendering
You can use control logic (if statements) to specify whether or not a component should be rendered.
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
Joel Ross
info340-react-chat
By Joel Ross
info340-react-chat
- 97