React + Bootstrap: невозможно отобразить содержимое вкладок

Question

• 1000 отображаются, их можно щелкнуть, и отображается содержимое вкладки.

<Tabs defaultActiveKey="home" transition={false} id="noanim-tab-example">
  <Tab eventKey="home" title="Home">
    home content
  </Tab>
  <Tab eventKey="profile" title="Profile">
    profile content
  </Tab>
  <Tab eventKey="contact" title="Contact" >
    contact content
  </Tab>
</Tabs>

При сопоставлении нестатических c данных вкладки также отображаются ... но при нажатии на отдельную вкладку содержимое не отображается.

Код:

 return(
   <div>
     <Tabs defaultActiveKey={props.summaries[0].checkPoint.shortLabel} transition={false} id="cp-summaries">
       {props.summaries.map((summary, index)=>{
       return( <Tab key={index} eventkey={summary.checkPoint.shortLabel} title={summary.checkPoint.shortLabel}>toto</Tab> )})}
     </Tabs>
   </div>
 )

Сгенерировано html Извлечение:

<div>
  <nav class="nav nav-tabs" role="tablist">
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title1</a>
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title2</a>
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title3</a>
    <a href="#" role="tab" id="cp-summaries-tab-null" aria-controls="cp-summaries-tabpane-null" tabindex="-1" class="nav-item nav-link">Title4</a>
  </nav>
  <div class="tab-content">
    <div eventkey="Title1" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content1</div>
    <div eventkey="Title2" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content2</div>
    <div eventkey="Title3" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content3</div>
    <div eventkey="Title4" id="cp-summaries-tabpane-undefined" aria-labelledby="cp-summaries-tab-undefined" role="tabpanel" aria-hidden="true" class="tab-pane">Content4</div>
  </div>
</div>

Есть подсказка?

Answer 1

У вас есть опечатка:

замените eventkey на eventKey на Tab, которое вы возвращаете на карте.

Итак, это должно выглядеть так:

// ...
return (
  <div>
    <Tabs
      defaultActiveKey={props.summaries[0].checkPoint.shortLabel}
      transition={false}
      id="cp-summaries">
      {props.summaries.map((summary, index) => {
        return (
          <Tab
            key={index}
            eventKey={summary.checkPoint.shortLabel}
            title={summary.checkPoint.shortLabel}>
            toto
          </Tab>
        );
      })}
    </Tabs>
  </div>
);
// ...