Panthers Tiffany Rogers react-chatlog #125
Conversation
|
|
||
| const toggleLike = (id) => { | ||
|
|
||
| setEntries(prevEntries => { |
There was a problem hiding this comment.
I know that we did together in my office hours, but please reach out if you need any further explanations as to how and why we want to do this. Great job on following the implementation!
The (Usual) Steps to Lifting Up State:
- Establish state with data (from data folder or API) in necessary parent component.
- Design
updateFunctionthat uses theidof an object to preforms desired changes and updates state. - Pass
updateFunctionto necessary children components - Make
updateFunctionthe event handler and passingprop.idas parameter.
| ChatEntry.propTypes = { | ||
| //Fill with correct proptypes |
There was a problem hiding this comment.
Don'r forget you also want to include the toggleLike function you are passing in as a prop as well!
| @@ -1,22 +1,28 @@ | |||
| import React from 'react'; | |||
| import './ChatEntry.css'; | |||
| import PropTypes from 'prop-types'; | |||
| import TimeStamp from './TimeStamp'; | |||
|
|
|||
| const ChatEntry = (props) => { | |||
There was a problem hiding this comment.
Just a friendly reminder that we can also de-structure our props with const ChatEntry = ( {myProp}) to have direct access to them!
|
|
||
| return ( | ||
|
|
||
| <ChatEntry |
There was a problem hiding this comment.
So you see how setting all of those props took up a lot of lines of code? We could make that more concise with this here:
< ChatEntry toggleLike={props.toggleLike} key={entry.id} entry={entry} />Then in each chatEntry we could access any prop we needed with props.entry.myProp
| }; | ||
| </> | ||
| )}; | ||
|
|
There was a problem hiding this comment.
Remember to put your props-types checking for this one. You could use the arrayOf and then shape functionality to be very explicit about the data structure you are expecting to pass through here.
|
|
||
| const ChatEntry = (props) => { | ||
| return ( | ||
| return( | ||
| <div className="chat-entry local"> |
There was a problem hiding this comment.
I see you didn't do the optional enhancement, just in case you were wondering about how it worked you could basically use the ids of each message to decide if it should be on the right or left side of the screen. the receiver would always be an even id and the sender would always be odd.
const localRemote = props.id % 2 === 0 ? 'chat-entry local' : 'chat-entry remote';
then we could assign could put this class name in the div on line 8
finished project and show and tell