How do I pass useState data from one component file to another ReactJS

Question

I need to share some data I have collected with useState from one component file to another. I am building a blog using Material UI that displays all posts on the home page. When a specific post is clicked I want to redirect the user to a single post page where they can read the entire thing. I have searched StackOverflow and the internet and can't seem to find a straight forward answer to the problem. I think context API might be overkill. And I am unsure how to pass props from one component to another when I am not calling the function in the other component file.

This is part of the home page component. This code stores the post id that I need to access from the SinglePost component. When I click a post it correctly console.logs the id:

export default function HomeCard() { 
  const [latestPosts, setLatestPost] = useState([]); 
  useEffect(() => { 
      fetch('http://localhost:8000/posts') 
          .then ((res) => { 
              return res.json(); 
          }) 
          .then ((data) => { 
              setLatestPost(data.reverse()); 
          }); 
  }, []); 
  const navigate = useNavigate(); 
  const storePostId = (singlePostId) => { 
    navigate('/single-post') 
    console.log(singlePostId); 
  }

A little further down in the file:

<CardActionArea  
    onClick={ () =>  
  storePostId(latestPost.id) 
}>

Within my SinglePost component:

const SinglePost = () => { 
    useEffect(() => { 
        fetch(`http://localhost:8000/posts/${singlePostId}`) 
            .then ((res) => { 
                return res.json(); 
            }) 
            .then ((data) => { 
                return (data); 
            }); 
    }, []);

If you want to direct it to a new URL and have something rendered given that ID a common solution is to introduce a router. That is literally the use case. — possum, Nov 01 '22 at 13:09
Does this answer your question? [How to pass data from a page to another page using react router](https://stackoverflow.com/questions/59701050/how-to-pass-data-from-a-page-to-another-page-using-react-router) — KcH, Nov 01 '22 at 13:38
@possum could you elaborate a little more on what you mean by introducing a router? — postmetric, Nov 01 '22 at 15:34

Muhammad · Accepted Answer · 2022-11-02T10:33:47.707

You can pass the prob as a query parameter.

  const storePostId = (singlePostId) => { 
    navigate(`/single-post/${singlePostId}`) 
  }

and in SinglePost component read the query params using your project's router (ie: react router dom)

Edit:

You're using useNavigate from react router. I'm assuming you've had the routes set up

  <Routes>
    <Route path="/single-post" element={<SinglePost />} />
  </Routes>

I'd recommend setting it like this

  <Routes>
    <Route path="/single-post/:singlePostId" element={<SinglePost />} />
  </Routes>

And in your SinglePost

const SinglePost = () => { 
    let { singlePostId } = useParams(); //It will read it from query params

    useEffect(() => { 
        fetch(`http://localhost:8000/posts/${singlePostId}`) 
            .then ((res) => { 
                return res.json(); 
            }) 
            .then ((data) => { 
                return (data); 
            }); 
    }, [singlePostId]);

I follow you on the first part, but can you elaborate on "and in SinglePost component read the query params using your project's router (ie: react router dom)" — postmetric, Nov 01 '22 at 15:19
I've updated my answer, see if you need more help. Also this is what I'm referring to https://reactrouter.com/en/main/hooks/use-params — Muhammad, Nov 02 '22 at 10:34

How do I pass useState data from one component file to another ReactJS

1 Answers1