id передается как props, изменяющийся на undefined после отображения значения в console.log первым

Question

Свойство id, переданное в качестве реквизита, показывает 0 "число" для первого console.log (). Я пишу только один оператор console.log (). Но каким-то образом значение меняется на NaN «undefined».

Вот как я передаю идентификатор компоненту.

EDIT:

На самом деле я хочу используйте идентификатор, хранящийся в массиве tabs, для использования в компоненте ContentListItem, чтобы получить значение уважения col1,col2 в объекте eventlist. Полное дерево компонентов выглядит следующим образом:

                        App
                         |
                        Body
 _____________________________________________________________
      /                  |                       \
Eventtypelist     TabHeaderDisplayArea  TabContentDisplayArea
   |                     |                      |
 Event                  Tab                 ContentListItem

Компонент Eventtypelist:

export default function Eventtypelist(props) {
  function handlePassId(id) {
    props.getIdtoBody(id);
  }

  return (
    <div>
      <h2>Events Viewer</h2>
      <ul className="body-event-list">
        <li>
          <Event no="1" passId={handlePassId} />
        </li>
        <li>
          <Event no="2" passId={handlePassId} />
        </li>
        <li>
          <Event no="3" passId={handlePassId} />
        </li>
      </ul>
    </div>
  );
}

Компонент вкладки

export default function Tab(props) {
  return (
    <div className="grid-container-tab">
      <div className="tab-heading ">
        <h4>Event type {props.index}</h4>
      </div>
    </div>
  );
}

TabHeaderDisplayComponent

export default function TabHeaderDisplayArea(props) {
  let styles = {
    display: "grid",
    gridTemplateColumns: "10rem 10rem",
  };

  return (
    <div style={styles}>
      {props.noOfTabs.map((tab, index) => {
        return <Tab index={tab} />;
      })}
    </div>
  );
}

Родительский компонент:

export default function Body() {
  const [idToSend, setidToSend] = useState(1);
  const [tabs, setTabs] = useState(["1"]);

  function handlegetIdtoBody(id) {
    setidToSend(id);
    setTabs((prevVal) => {
      return [...prevVal, id];
    });
    console.log(tabs);
  }

  return (
    <div className="inner-body grid-container">
        <TabContentDisplayArea
          content={
            <div>
              <ContentListItem id={tabs[0]} />
            </div>
          }
        />
      </div>
    </div>
  );
}

Дочерний компонент:

export default function ContentListItem(props) {
  
  let b = parseInt(props.id) - 1;
  console.log(b, typeof b);
  let x = JSON.parse(JSON.stringify(eventlist));
  let a = x[b].col1;
  return (
    <div>
      <div style={gridContainer}>
        <p>{a}</p>
      </div>
    </div>
  );
}

Объект списка событий:

const eventlist = [
  {
    col1: "Event 1",
    col2: "Event 1 details and everything else go here",
  },
  {
    col1: "Event 2",
    col2: "Event 2 details and everything else go here",
  },
];

Это первый журнал консоли перед происходит изменение:

This is the later console log after the change occurs:

Это более поздний журнал консоли после внесения изменений.

Журнал консоли повторяется много раз больше, чем 20 раз показывает NaN undefined после того, как происходит изменение.