How to render component onClick in React after passing props?-CodePudding

How do you update the LatestTweetsComponent with the data returned from a fetch call that happens in handleRequest? tweets is updating correctly onClick however the LatestTweetsComponent does not render or update. I may be approaching this incorrectly.

const LatestTweets = () => {
  const [tweets, setTweets] = useState(null)

  const handleRequest = async () => {
    // this hits an api to get tweets and sets the tweets
    // is this where the LatestTweetsComponent render is called?
  }

  return (
    <div>
      <button onClick={() => handleRequest()}>View Latest Tweets</button>
      <LatestTweetsComponent tweets={tweets} />
    </div>
  )
}

const LatestTweetsComponent = props => {
  return (
    <div>
      {props.map((tweet, index) => {
        return <p key={index}>{tweet}</p>
      })}
    </div>
  )
}

export default LatestTweets

CodePudding user response：

i think this is because you are trying to map over "props", while you should be mapping over "props.tweets" try this :

const LatestTweetsComponent = props => {
  return (
    <div>
      {props.tweets.map((tweet, index) => {
        return <p key={index}>{tweet}</p>
      })}
    </div>
  )
}

CodePudding user response：

Use that handleFetch in useEffect. So, whenever your state gets change useeffect will rerender that change.

And use tweets as argument in useEffect