Q:

React Hooks Remove item from array

In my react hooks component I am rendering data from an array of objects.
const lineInfo = [
  {
    id: '001',
    line: 's-1125026',
    arrival: '7:30',
    departure: '8:00',
    authorization: 'User 1',

  },
  {
    id: '002',
    line: 's-1125027',
    arrival: '8:01',
    departure: '8:50',
    authorization: 'User 1',
  },

In the .map() I'm returning data using this data:
       <div>
         {lineInfo.map((line) => (
              <Row key={`line_${line.id}`}>

 // remaining code removed for length

The list returns fine, so now I am trying to remove a row from the list.
Remove func
  const [list, setList] = useState(lineInfo);

  function handleRemove(id) {
    console.log('id' id);
    const newList = list.filter((line) => line.id !== id);
    setList(newList);
  }

Remove Button
        <Button
          className={style.close_button}
          onClick={() => handleRemove(line.id)}
         >
           <img src={close} alt="trash" />
        </Button>
</Row>

The problem I am running into is that in my console log, is that only the line.id is being removed from the array instead of the whole row of data.

How do I remove all the data belonging to a particular id?
Even though the console log shows that the text is removed, why is the text that is displayed in my row not removed from the view?

I'm not too familiar with hooks and have only been able to find examples of my particular problem with class components. Thanks in advance.

A:

You should display the defined state with the hook. in this case the list , and not the lineInfo.
 <div>
   {list.map((line) => (
     <Row key={`line_${line.id}`}>

 // remaining code removed for length

