so I'm trying to re render a component by setting its state on a toggle click.

Here is my code, I'm using useEffect to set 3 state "meetings", "displayMeetings" and "allMeetings" and I give "displayMeetings" the same state as "meetings". When I click on the Toggle I expect the "displayMeetings" to take "meetings" or "allMeetings" state and I do get it in console.log (not on the first click thought).

If feel like I'm just re rendering the entire component every time and calling the useEffect which lead to remaking over and over the first state but I'm not so sure..

(Ps: using "displayMeetings" is the last attempt I tried, before that I tried to change the state of "meetings" back and forth without success)

Thank you.

import * as React from 'react';
import { useState, useEffect } from 'react';
import { Box, CardHeader, ToggleButton, ToggleButtonGroup, Stack } from '@mui/material';
import useLocales from '../../hooks/useLocales';
import '../../style/style.css';
import UpcomingMeeting from './UpcomingMeeting';
import * as  API from '../../api/api_call';



// ----------------------------------------------------------------------

export default function UpcomingMeetings() {
  const { translate } = useLocales();
  const [meetings, setMeetings] = React.useState('');
  const [allMeetings, setAllMeetings] = React.useState('');
  const [alignment, setAlignment] = React.useState('myMeetings');
  const [displayMeetings, setDisplayMeetings] = React.useState('');


  const handleChange = (event, newAlignment) => {
    setAlignment(newAlignment)
    if(alignment === 'myMeetings'){
      setDisplayMeetings(meetings)
      console.log(displayMeetings)
    }else{
      setDisplayMeetings(allMeetings)  
      console.log(displayMeetings)  
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.getUpcomingMeetings();
      setMeetings(response.data.data);
      setDisplayMeetings(response.data.data);
      const responseAll = await API.getAllUpcomingMeetings();
      setAllMeetings(responseAll.data.data);
    }  
    fetchData()
      .catch(console.error);;
  }, []);

  return (
    <Box>
      <ToggleButtonGroup value={alignment} onChange={handleChange}>
        <ToggleButton value="myMeetings">My Meetings</ToggleButton>
        <ToggleButton value="allMeetings">All Meetings</ToggleButton>
      </ToggleButtonGroup>
      <Box> 
        {displayMeetings === '' ? null :
        <UpcomingMeeting meetings={meetings} />}
      </Box>
    </Box>
  );
}

CodePudding user response：

import * as React from 'react';
import { useState, useEffect } from 'react';
import { Box, CardHeader, ToggleButton, ToggleButtonGroup, Stack } from '@mui/material';
import useLocales from '../../hooks/useLocales';
import '../../style/style.css';
import UpcomingMeeting from './UpcomingMeeting';
import * as  API from '../../api/api_call';



// ----------------------------------------------------------------------

export default function UpcomingMeetings() {
  const { translate } = useLocales();
  const [meetings, setMeetings] = React.useState('');
  const [allMeetings, setAllMeetings] = React.useState('');
  const [alignment, setAlignment] = React.useState('myMeetings');
  const [displayMeetings, setDisplayMeetings] = React.useState('');


  const handleChange = (event, newAlignment) => {
    setAlignment(newAlignment)
    if(alignment === 'myMeetings'){
      setDisplayMeetings(meetings)
      console.log(displayMeetings)
    }else{
      setDisplayMeetings(allMeetings)  
      console.log(displayMeetings)  
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      const response = await API.getUpcomingMeetings();
      setMeetings(response.data.data);
      setDisplayMeetings(response.data.data);
      const responseAll = await API.getAllUpcomingMeetings();
      setAllMeetings(responseAll.data.data);
    }  
    fetchData()
      .catch(console.error);;
  }, []);
//change meetings to displayMeetings (was an error)
  return (
    <Box>
      <ToggleButtonGroup value={alignment} onChange={handleChange}>
        <ToggleButton value="myMeetings">My Meetings</ToggleButton>
        <ToggleButton value="allMeetings">All Meetings</ToggleButton>
      </ToggleButtonGroup>
      <Box> 
        {displayMeetings === '' ? null :
        <UpcomingMeeting meetings={displayMeetings} />}
      </Box>
    </Box>
  );
}