React - Removing item from array not rerendering list

Question

I am having trouble understanding why this code is not working. It removes the item from the people array in the state but its not rerendering the list.

import { render } from 'react-dom';
import axios from 'axios';
import ReactLoading from 'react-loading';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import People from './components/People';
import './style.css';

interface PeopleData {
  name: string;
  eye_color: string;
}
interface PeopleResponse {
  results: PersonagemData[];
}

const App: React.FC = () => {
  const [loading, setLoading] = React.useState(true);
  const [people, setPeople] = React.useState([]);
  const isMobile = useMediaQuery('(max-width:768px)');
  
  React.useEffect(() => {
    axios.get<PeopleResponse>('https://swapi.dev/api/people/').then(response => {
      setPeople(response.data.results);
      setLoading(false);
      console.log(response)
    })
  }, []);

  const deleteChar = React.useCallback(index => {
    let aux = people;
    aux.splice(index, 1)
    setPeople(aux);
  }, [people])

  return (
      <div>
          {loading ? (
            <ReactLoading
            type={'spin'}
            color={'#800080'}
            height={'10%'}
            width={'10%'}
            /> 
            ):
              people.map((element, index) => 
              (<People
              index={index} 
              name={element.name} 
              color={element.eye_color} 
              deleteChar={deleteChar}
              />))
          }  
        </div>
    );
}

render(<App />, document.getElementById('root'));

I don't understand why it isn't rerendering. I'm doing this on StackBlitz so you can test it on this link https://react-ts-j1kkcp.stackblitz.io

Willian Gaspar · Accepted Answer · 2020-10-07 19:43:48Z

3

You need to destructure the new list: setPeople([...aux]); Otherwise React will think nothing has changed.

answered Oct 7, 2020 at 19:43

Willian Gaspar

3014 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

akirasephyr Over a year ago

You're right! Now that you said it I totally remember the same thing happening to me before. Thanks.

Collectives™ on Stack Overflow

React - Removing item from array not rerendering list

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related