Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

139
Views
React Component doesn't rerender when the state is changed

I am working on a small React project to get to learn more about it.

The project can make and view groups and in the groups you can store images, videos...

So the problem is when I open one of those groups and while I'm in it if I try to change to another group the component doesn't rerender and I have the same information.

Here's some of the code:

App:

function App() {
  const [chosenGroup, setChosenGroup] = useState({});

return (
    <Router>
      <Header setChosenGroup={setChosenGroup}/>
      <Routes>
        <Route 
          path="/Group/:group_name" 
          element={<Group group={chosenGroup} />}
        />
      </Routes>
    </Router>
  );

}

Header (Where I choose the group):

function Header(props) {
  const setChosenGroup = props.setChosenGroup;

  return (
    <>
      <Top>
        <Image src={SiteLogo} />
        <GroupsBtn>
          MY GROUPS
        </GroupsBtn>
        <AllGroupsCont>
          <AllGroups>
            {myGroupDB.map((group, index) => {
              return (
                <StyledLink to={`/Group/${group.group_name}`} key={index}>
                  <Group onClick={() => {
                      setChosenGroup(group);
                    }}>
                    {group.group_name}
                  </Group>
                </StyledLink>
              );
            })}
          </AllGroups>
        </AllGroupsCont>
      </Top>
    </>
  )
}

Group:

function Group(props) {
  const param = useParams();
  
  return (
    <Main>
      <Top>
        <GroupTitle defaultValue={param.group_name} />
        <SaveButton className="saveButtonGroup" src={SaveIcon} />
        <DateCreated>Date created: {creationDate}</DateCreated>
      </Top>
      <Center>
        <GridContainer>
          {group.photos.map((photo) => {
            <Image src={photo.url} />;
          })}
        </GridContainer>
      </Center>
      <Bottom>
        <GoBackBtn onClick={() => navigate(-1)}>GO BACK</GoBackBtn>
        <SaveBtn>SAVE</SaveBtn>
      </Bottom>
    </Main>
  )
}

I checked the components in the browser and the state does indeed update so the problem is something else.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

This might solve it

  <Group onClick={() => {
                      setChosenGroup({...group});
 }}>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!