Created Cards i want to click on the card to get list of all blogs created by user?

Question

I'm using react and active record associations[users,blogs] for backend. I basically have a nested data structure. I rendered a list of cards on my page and I want the user to be able to click on the card so that it gives them all the blogs they create and also allows them to add a new blog.

I'm confused how this nested data structure will work. I tried creating two use effects.

import './App.css';
import Home from './components/Home';
import Users from './components/Users';
import NewUserForm from './components/NewUserForm';
import Navbar from './components/Navbar';
import Search from './components/Search';
import { useState, useEffect } from 'react';
import { Route, Switch } from 'react-router-dom';
import styled from 'styled-components';
import Reviews from './components/Reviews';
import AddReviewForm from './components/AddReviewForm';

function App() {
  const [users, setUsers] = useState([]);
  const [reviews, setReviews] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    document.title = 'Shades of Fashion';
  }, []);

  useEffect(() => {
    fetch('http://localhost:9292/users')
      .then((res) => res.json())
      .then((userData) => {
        setUsers(userData);
      });
  }, []);

  const displayedUsers = users.filter((user) => {
    return user.name.toLowerCase().includes(searchTerm.toLocaleLowerCase());
  });

  function handleAddUsers(newUser) {
    setUsers([...users, newUser]);
  }

  useEffect(() => {
    fetch('http://localhost:9292/reviews')
      .then((res) => res.json())
      .then((reviewData) => {
        setReviews(reviewData);
      });
  }, []);

  const displayedReviews = reviews.filter((review) => {
    return review.name;
  });

  function handleAddReviews(newReview) {
    setReviews([...reviews, newReview]);
  }

  return (
    <AppContainer>
      <Navbar />
      <Switch>
        <Route path='/reviews'>
          <Reviews reviews={displayedReviews} />
        </Route>
        <Route path='/addReview'>
          <AddReviewForm onAddReview={displayedReviews} />
        </Route>

        <Route path='/users'>
          <Search searchTerm={searchTerm} onSearchChange={setSearchTerm} />
          <Users users={displayedUsers} />
        </Route>
        <Route path='/addUser'>
          <NewUserForm onAddUser={handleAddUsers} />
        </Route>

        <Route path='/'>
          <Home />
        </Route>
      </Switch>
    </AppContainer>
  );
}

Answer 1

    import "./App.css";
    import Home from './components/Home';
    import Users from './components/Users';
    import NewUserForm from './components/NewUserForm';
    import Navbar from './components/Navbar';
    import Search from './components/Search';
    import { useState ,useEffect} from 'react';
     import { Route,Switch } from 'react-router-dom';
     import styled from "styled-components";
    import Reviews from "./components/Reviews";
    import AddReviewForm from "./components/AddReviewForm";

    function App() {
 
  const[users,setUsers]=useState([]);
  const[reviews,setReviews]=useState([]);
  const[searchTerm,setSearchTerm]=useState("");

     useEffect(() => {
      document.title = "Shades of Fashion"
    }, []);
  
 useEffect(()=>{
    fetch("http://localhost:9292/users")
    .then(res=>res.json())
    .then(userData=>{
      setUsers(userData)
    })
 },[])
 
 const displayedUsers=users.filter((user)=>{
   return user.name.toLowerCase().includes(searchTerm.toLocaleLowerCase());
 });

 


 function handleAddUsers(newUser){
   setUsers([...users,newUser]);
 }

 useEffect(()=>{
  fetch("http://localhost:9292/reviews")
  .then(res=>res.json())
  .then(reviewData=>{
    setReviews(reviewData)
  })
},[])

const displayedReviews=reviews.filter((review)=>{
  return review.name
});

 function handleAddReviews(newReview){
  setReviews([...reviews,newReview]);
}


  return (
    <AppContainer>
  <Navbar />
<Switch>
<Route path="/reviews">
    <Reviews reviews={displayedReviews}/>
  </Route>
  <Route path="/addReview">
    <AddReviewForm onAddReview={displayedReviews}/>
  </Route>


  <Route path="/users">
  <Search searchTerm={searchTerm} onSearchChange={setSearchTerm}/>
  <Users users={displayedUsers}/>
 </Route>
 <Route path="/addUser">
<NewUserForm onAddUser={handleAddUsers} />
</Route>

<Route path="/">
  <Home />
  </Route>

  </Switch>
 
    </AppContainer>
  )
  
 }]