unique key prop error in bootstrap-react-table2

Question

I have react-bootstrap-table2 and my expandRow function is generating

tags with attributes. When I expand data, I can see error

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Context.Consumer`.
    in span (at table_chart.js:796)
    in Unknown (created by Body)
    in tbody (created by Body)
    in Body (created by BootstrapTable)
    in table (created by BootstrapTable)
    in div (created by BootstrapTable)
    in BootstrapTable (created by Context.Consumer)
    in RowExpandProvider (created by Context.Consumer)
    in PaginationDataProvider (created by Context.Consumer)
    in SortProvider (created by Context.Consumer)
    in DataProvider (created by BootstrapTableContainer)
    in BootstrapTableContainer (at table_chart.js:828)
    in div (at table_chart.js:826)
    in listChart (at CallsList.js:70)
    in div (at CallsList.js:69)
    in div (at CallsList.js:68)
    in CallsList (at Home.js:36)
    in div (at Home.js:32)
    in Home (at App.js:175)
    in Route (at App.js:175)
    in Switch (at App.js:174)
    in div (at App.js:173)
    in div (at App.js:162)
    in div (at App.js:161)
    in div (at App.js:192)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:191)
    in App (at src/index.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:14)

So even each paragraph in expand row need key property? Why? Inside py paragraph are also span, img tags...

 renderer: row => (  
            <div className="tab">
            {Object.keys(row._source.attrs).sort().map(cell => 

  <p value={row._source.attrs[cell]}> 
                      <span className="spanTab">{cell}:</span>
                             <span className="spanTabSmall" >      <img 
 onClick={this.addColumn} field={cell} value={row._source.attrs[cell]}  
  className="icon" alt="addColumnIcon" title="insert column" src= 
{addColumnIcon} />   </span> 
                     <span className="red">{row._source.attrs[cell]} 
</span>
 </p>

The problem is, I can see attributes in generated html table

<p class="tabletd" field="attrs.call-id" value="5147447D-5D137270000333DC- 
ADC22700"><span class="spanTab">call-id: </span><span 
 class="spanTabSmall">      <img field="call-id" title="insert column" 
 value="5147447D-5D137270000333DC-ADC22700" class="icon" 
 alt="addColumnIcon" ><img field="call-id" value="5147447D- 
5D137270000333DC-ADC22700" title="filter" class="icon" alt="filterIcon"> 
<img field="call-id" value="5147447D-5D137270000333DC-ADC22700" 
 class="icon" alt="unfilterIcon" title="unfilter" ></span><span 
 class="spanTab">5147447D-5D137270000333DC-ADC22700</span></p>

But only name of attribute "call-id" not the value even though it is in tag.

Answer 1

your "keyField" value need to use your columns's "dataField" value which is unique.

for example (watch out "uniqueData" 's position):

  render() {
    const products = [
      { uniqueData:"0001",name: "A1", address: "hewqo", open: "9:00", close: "20:00" },
      { uniqueData:"0002",name: "B2", address: "XDfsdf", open: "11:00", close: "23:00" },
      { uniqueData:"0003",name: "C3", address: "XDssddf", open: "11:00", close: "23:00" }
    ];
    const columns = [
      {
        dataField: "uniqueData",
        text: "ID"
      },
      {
        dataField: "name",
        text: "Name"
      },
      {
        dataField: "address",
        text: "Address"
      },
      {
        dataField: "open",
        text: "Open"
      },
      {
        dataField: "close",
        text: "Close"
      }
    ];

    return (
      <div>
        <BootstrapTable
          keyField="uniqueData"
          data={products}
          columns={columns}
        />
      </div>
  }

p.s. uniqueData maybe is your DB unique ID or someting else .

hope to help you .

Answer 2

First of all, make a habit of including key prop to every element you generate through .map(...) or any iterator, when you work with React. The paragraph you are generating should have the key prop.

Also, make sure your <BootstrapTable> component (since you've mentioned react-bootstrap-table2) has a keyField prop.