Pass from Parent Component to Child with useEffect:

  • in /twittme-web/src/tweets/components.js ```javascript export function TweetsComponent(props) {

    const textAreaRef = React.createRef()

    const [newTweets, setNewTweets] = useState([]) //new

    const handleSubmit = (event) => { //new

    1.   event.preventDefault()
    2.   const newVal = textAreaRef.current.value
    3.   let tempNewTweets = [...newTweets]
    4.   tempNewTweets.unshift({ //put it to the beginning
    5.     content: newVal,
    6.     likes: 0,
    7.     id: 12313
    8.   })
    9.   setNewTweets(tempNewTweets) //new
    11.   textAreaRef.current = '' //after the submission, clear the textarea

    } return 

    1.   <div className='col-12 mb-3'>
    2.       <form onSubmit={handleSubmit}>
    3.           <textarea ref={textAreaRef} required={true} className='form-control' name='tweet'>
    5.           </textarea>
    6.           <button type='submit' className='btn btn-primary my-3'>Tweet</button>
    7.       </form>
    8.   </div>
    9.   <TweetsList newTweets={newTweets}/> <!--new-->

    }

export function TweetsList(props) { //const [tweets, setTweets] = useState([]) const [tweetsInit, setTweetsInit] = useState([]) //rename console.log(props.newTweets) //new, here newTweets is returned above

  1. useEffect(() => {
  2.   const myCallback = (response, status) => {
  3.     if (status === 200){
  4.       //setTweets(response)
  5.       setTweetsInit(response) //rename
  6.     } else { 
  7.       alert("There was an error")
  8.     }
  9.   }
  10.   loadTweets(myCallback) 
  11. }, [])

//return tweets.map((item, index) => { return tweetsInit.map((item, index) => { //rename return }) }

  1. refresh and tweet something:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1593452911461-04980f3e-674a-4788-bd97-85e800b07b97.png#align=left&display=inline&height=479&margin=%5Bobject%20Object%5D&name=image.png&originHeight=957&originWidth=1782&size=149231&status=done&style=none&width=891)<br />and the console log shows the information about this temporary tweet (but it isn't actually updating something)
  3. - setup the content of the newTweet above and push it to the list in TweetsList
  4. ```javascript
  5. export function TweetsList(props) {
  6.     const [tweetsInit, setTweetsInit] = useState([]) 
  7.     //console.log(props.newTweets)
  8.     const [tweets, setTweets] = useState([])
  9.     useEffect(() => {
  10.       const final = [...props.newTweets].concat(tweetsInit) //[...content] means a new list with the content
  11.       if(final.length !== tweets.length) {
  12.         setTweets(final)
  13.       }
  14.     }, [props.newTweets, tweets, tweetsInit])
  16.     useEffect(() => {
  17.       const myCallback = (response, status) => {
  18.         if (status === 200){
  19.           setTweetsInit(response)
  20.         } else { 
  21.           alert("There was an error")
  22.         }
  23.       }
  24.       loadTweets(myCallback) 
  25.     }, [])
  27.   //return tweetsInit.map((item, index) => {
  28.     return tweets.map((item, index) => {
  29.       return <Tweet tweet={item} className='my-5 py-5 border bg-white text-dark' key={`${index}-{item.id}`} />
  30.     })
  31. }

refresh and send
image.png
works(id=12313), but it’s still a temporary tweet.